最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Sort by two columns with dataTables (Cannot read property 'sType' of undefined) - Stack Overflow

programmeradmin2浏览0评论

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 the orderdata 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 because orderable sets it to ignore user input. – E. Serrano Commented Jul 6, 2015 at 15:58
 |  Show 1 more ment

2 Answers 2

Reset to default 4

CAUSE

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.

发布评论

评论列表(0)

  1. 暂无评论