1

我正在尝试使用 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  |
-------------------------------------

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

4

1 回答 1

4

使用以下代码创建满足您要求的 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);
});​

现场演示| 来源

于 2012-12-24T16:48:10.917 回答