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

Question

我正在尝试使用 jQuery 的 DataTable 插件(最新版本)对 2 列进行排序。这样，加载就可以了。

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

我在点击时对两列进行排序没有什么困难。例如，当用户单击“专辑”时，表不会对 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));
    }
});

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

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

运行以下脚本来初始化数据表，设置排序方法，禁用第一列的排序，并使单击第一列标题对第二列进行排序

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