使用数据表按两列排序(不能读取property ' style '未定义)

Sort by two columns with dataTables (Cannot read property 'sType' of undefined)

本文关键字：读取 property style 不能读 未定义 排序 数据表 两列 不能      更新时间：2023-09-26

我正在使用datattables插件来处理列的排序。

尝试应用多列排序，我在控制台中得到以下错误:

Uncaught TypeError: Cannot read property 'sType' of undefined

由于文档在这方面没有很好的解释，并且没有包含太多关于此功能的示例，我不知道问题在哪里。

问题再现

$('#demo').DataTable({
    paging: false,
    ordering: true,
    columnDefs: [{
        orderData: [[0, 'asc'],[1, 'asc']],
        targets: [1]
    }]
});

原因

选项列。orderData应该是索引数组，如下所示:

$('#demo').DataTable({
    paging: false,
    ordering: true,
    columnDefs: [{
        orderData: [0, 1],
        targets: [1]
    }]
});

参见更新后的JSFiddle进行演示。

虽然多列排序示例页面提到您可以使用[ [0,'asc'], [1,'asc'] ]，但是它与columns.orderData的手册相矛盾。

似乎是代码或手册的问题。通过查看DataTables源代码，我发现它只接受索引数组，而不接受排序方法。

针对此问题创建了jQuery数据表的新问题#591。

现在确认问题是多列排序示例页面上的错误语句。

解决方案

解决方法是绑定到order事件，并根据需要使用order()方法重新排序表，该方法除了接受列索引之外还接受排序方法。

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();
   }
});

似乎多列顺序可以在数据表中工作，使用:

  • 默认启用多排序
  • 第一列，固定升序，忽略用户输入
  • 第二列，用户可以选择排序方向
  • 无需shift-click以保持多订单参与

总结了整个过程:

    $('#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
      ]
    });

相关文章：