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));
    }
});

2 つの列で 1 つの dataTable 列を制御するには、最初の列の並べ替え機能を無効にし、ヘッダーにクラスを追加します。

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

次のスクリプトを実行して、dataTable を初期化し、並べ替え方法を設定し、最初の列の並べ替えを無効にし、最初の列のヘッダーをクリックして 2 番目の列を並べ替えるようにします。

J:

$(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 に答える