javascript - 在不同的 div 上对 jQuery DataTable 进行分组和列过滤

Question

我正在使用 jQuery DataTables 对数据进行分组和过滤。但两者不能一起工作。只有一个可以工作。

oTable = $('#schedule').dataTable({
    'bLengthChange': false,
    'bPaginate': false,
    'bJQueryUI': true,
    'processing': true,
    "aoColumnDefs": [ 
       { "bSortable": false, "aTargets": ["no-sort"] }
    ]
}).columnFilter({
   sPlaceHolder:"head:before"
}).rowGrouping({
    sGroupingColumnSortDirection: "desc",
    bExpandableGrouping: true,
    bExpandSingleGroup: false,
    iExpandGroupOffset: -1,
    asExpandedGroups: ['Pending Action', 'In Operation']
});

请给我关于如何使用两者的建议，我想在不同的 div 中添加过滤器字段。

Answer 1

它不起作用，因为您正在使用链接。您不小心尝试在 columnFilter() 返回的任何内容上初始化 rowGrouping:

dataTable().columnFilter().rowGrouping()
            < dataTable    < columnFilter

使用另一种方法来初始化插件，例如在 initComplete 回调中(fnInitComplete 如果您使用的是 1.9.x):

var table = $('#example').dataTable({
   initComplete : function() {
      this.columnFilter();
      this.rowGrouping({
          bExpandableGrouping: true,
          asExpandedGroups: ["Other Browsers", "Trident"],
          fnOnGrouped: function() { alert('Rows are regrouped!'); }
      });
   }
})

演示 -> http://jsfiddle.net/y2s2b0an/