Question

我正在尝试使用适用于jQuery（最新版本）的DataTable插件对2列进行排序。有了它，没关系。

 $('#example').dataTable( {
     "aaSorting": [ [2,'asc'], [3,'asc'] ],
});

点击后排列2列我没什么困难。例如，当用户单击“相册”时，该表不会对TrackNo列进行排序。我的表看起来像这样：

-------------------------------------
| Album             | TrackNo       |
-------------------------------------
| MyAlbum 2010      | 1 out of 12   |
| MyAlbum 2010      | 9 out of 12   |
| MyAlbum 2010      | 10 out of 12  |
| MyAlbum 2010      | 4 out of 12   |
| MyAlbum 2010      | 2 out of 12   |
| MyAlbum 2010      | 12 out of 12  |
-------------------------------------

另一个问题是，当我对“Album”列进行排序时，TrackNo列按此顺序排序：1,10,12,2,4,9。

我注意到可以改变DataTable的排序方式：

jQuery.fn.dataTableExt.oSort['numericstring-case-asc']  = function(x,y) {
    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['numericstring-case-desc'] = function(x,y) {
    return ((x < y) ?  1 : ((x > y) ? -1 : 0));
};

我的问题是：如何对TrackNo列进行排序，以便按顺序显示曲目而不在每个曲目前添加零？如何在点击时对2列进行排序？

Answer 1

使用以下代码创建符合您要求的dataTableExt oSort方法：

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "hybrid-asc": function(x, y) {
        if (!isNaN(parseInt(x)) && !isNaN(parseInt(y))) {
            x = parseInt(x);
            y = parseInt(y);
        }
        return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    },
    "hybrid-desc": function(x, y) {
        if (!isNaN(parseInt(x)) && !isNaN(parseInt(y))) {
            x = parseInt(x);
            y = parseInt(y);
        }
        return ((x < y) ? 1 : ((x > y) ? -1 : 0));
    }
});

要控制一个包含两列的dataTable列，请禁用第一列的排序功能并向标题添加一个类

HTML：<th class="sortAlbum">Album</th>

运行以下脚本初始化dataTable，设置排序方法，禁用第一列的排序，并单击第一列的标题排序第二列

JS：

$(document).ready(function() {
    var dataTableEx = $('#example').dataTable({
        "aaSorting": [[1, 'asc']],
        "aoColumns": [
            {
            "bSortable": false},
        {
            "bSortable": true,
            "sType": "hybrid"}]
    });

    dataTableEx.fnSortListener($('.sortAlbum'), 1);
});

Live Demo | Source

使用DataTable单击单个列标题时对多列排序进行排序

1 个答案: