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

Question

我正在尝试使用 jQuery 的 DataTable 插件（最新版本）对 2 列进行排序。有了这个，就可以onload了。

 $('#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  |
-------------------------------------

另一个问题是当我对“专辑”列进行排序时，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>

运行如下脚本初始化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