使用 fn PreDrawCallback 进行动态多列排序答案

【问题标题】：Dynamic multicolumn sorting using fnPreDrawCallback使用 fn PreDrawCallback 进行动态多列排序
【发布时间】：2015-03-17 17:41:14
【问题描述】：

我有一个包含 3 列的表格，当我对第 1 列或第 2 列进行排序时，我想按降序对第 3 列进行排序。

我正在使用 fnPreDrawCallback（我也尝试使用 fnDrawCallback）。

这是我的代码：

"fnPreDrawCallback": function (oSettings) {
    var column = oSettings.aaSorting[0][0];
    if (column !== 3) {
        oSettings.aaSorting.push([3, "desc"]);
    }
}

这段代码看起来不错，但是，例如，当我对第 1 列进行排序时，第 3 列没有排序，更尴尬的是，当我第二次尝试对第 1 列进行排序时，排序结果总是升序.

我怎样才能做到这一点？

【问题讨论】：

标签： sorting datatables multiple-columns

【解决方案1】：

在触发 preDrawCallback 时，数据已经“排序”，因此在此处更改 aaSorting 不会改变表格的结果。

您可以通过检查 oSettings 进行验证。有 aiDisplay 和 aiDisplayMaster 属性。 aiDisplay 是元素的有序数组，这些元素会随着对 a 的点击进行排序而发生变化。 aiDisplayMaster 是数据从服务器返回或存在于页面上的原始顺序。

我建议从第 th 元素的点击事件中手动调用 fnSort。为此，您必须取消绑定 datatables 安装的点击事件。

创建一个这样的函数并从 fnInitComplete 调用它，因此它仅在设置数据表后运行。

function unbindDTSorting() {
    //unbind sort event, prevent sorting when header is clicked                
    $j('[id$=table] th').unbind('click.DT');

    //create your own click handler for the header
    $j('[id$=table] th').click(function(e) {
        var oTable = $j('[id$=table]').dataTable();
        //here is where you can do all of your if/else logic to create the desired multidimensional sorting
        if(this.cellIndex == 3){
            oTable.fnSort( [ [2, 'asc'],[3,'desc' ]] );                              
        }
     });     
 }

【讨论】：