I'm using dataTables plugin to deal with the sorting of columns.
Trying to apply the multi-column ordering I'm getting the following error in the console:
Uncaught TypeError: Cannot read property 'sType' of undefined
As the documentation is not very explanatory in this regard and doesn't contain too many examples for this feature, I don't know where the problem is.
Reproduction of the problem
$('#demo').DataTable({
paging: false,
ordering: true,
columnDefs: [{
orderData: [[0, 'asc'],[1, 'asc']],
targets: [1]
}]
});
I'm using dataTables plugin to deal with the sorting of columns.
Trying to apply the multi-column ordering I'm getting the following error in the console:
Uncaught TypeError: Cannot read property 'sType' of undefined
As the documentation is not very explanatory in this regard and doesn't contain too many examples for this feature, I don't know where the problem is.
Reproduction of the problem
$('#demo').DataTable({
paging: false,
ordering: true,
columnDefs: [{
orderData: [[0, 'asc'],[1, 'asc']],
targets: [1]
}]
});
Share
Improve this question
asked Jul 6, 2015 at 14:45
AlvaroAlvaro
41.6k31 gold badges172 silver badges348 bronze badges
6
-
In reference to your original console error and bug report: your code is valid, but you need to remove the
targets
parameter in order for that syntax to work - the target columns are already specified in theorderdata
array. See jsfiddle/4edtajv3 with the multi-column ordering working. – E. Serrano Commented Jul 6, 2015 at 15:35 - @E.Serrano that's not the same. That's a single column ordering and not a multi column. – Alvaro Commented Jul 6, 2015 at 15:36
- True. And multi-column order still works when shift-clicking the column titles. – E. Serrano Commented Jul 6, 2015 at 15:38
- @E.Serrano but that's not what I'm looking for. – Alvaro Commented Jul 6, 2015 at 15:54
-
But that fixes the Uncaught TypeError, correct? Now, for multi-ordering:
orderFixed
enforces that the ordering criteria of the chosen column will always be in effect jsfiddle/yfaac1z2/2 - though the order indicating arrow changes on click, and it shouldn't becauseorderable
sets it to ignore user input. – E. Serrano Commented Jul 6, 2015 at 15:58
2 Answers
Reset to default 4CAUSE
Option columns.orderData should be array of indexes, see below:
$('#demo').DataTable({
paging: false,
ordering: true,
columnDefs: [{
orderData: [0, 1],
targets: [1]
}]
});
See updated JSFiddle for demonstration.
Although Multi-column ordering example page mentions that you can use [ [0,'asc'], [1,'asc'] ]
, however it contradicts with the manual for columns.orderData.
Seems like an issue either with code or the manual. By looking at the DataTables source code I see that it only accepts array of indexes without sorting method.
DETAILS
Created a new issue #591 for jQuery DataTables regarding this issue.
It is now confirmed that the issue was with incorrect statement on Multi-column ordering example page.
WORKAROUND
The workaround is to bind to order event and re-order the table as you want with order() method that accepts sorting method in addition to column index.
var table = $('#demo').DataTable({
paging: false,
ordering: true
});
$('#demo').on('order.dt', function(){
var order = table.order();
if(order[0][0] === 1){
table.order([0, 'asc'],[1, 'asc']).draw();
}
});
See this JSFiddle for demonstration.
It seems that multi-column order can work in dataTables, with:
- Multi-ordering enabled by default
- A first column with fixed ascending ording that ignores user input
- A second column where the user can choose sorting direction
- No need to shift-click to keep multi-ordering engaged
This sums up all the process:
$('#demo').DataTable({
ordering: true,
order:[[0, 'asc'],[1, 'asc']], // Set initial order
orderFixed: [ 0, 'asc' ], // Always use the first column for ordering
"columnDefs": [
{ "orderable": false, "targets": 0 } // Don't let the first column order to be changed
]
});
See it working here.