web-dev-qa-db-ja.com

jQuery DataTables：特定の列でソートする方法は？

ページは次のとおりです。

http://csuvscu.com/

日付列で並べ替える必要があります。今は11月6日、11月5日、最後に10月7日を読む必要があります。

どうすればいいですか？

jquerysortingdatatablescolumnsorting
16
Snow_Mac

現在のコード：

$('table').dataTable({
    // display everything
    "iDisplayLength": -1
});

あなたにできること：

oTable = $('table').dataTable({
    // display everything
    "iDisplayLength": -1
});

oTable.fnSort( [ [0,'desc'] ] ); // Sort by first column descending

しかし、以下のコメントで指摘されているように、これはよりクリーンな方法かもしれません。

$('table').dataTable({
    // display everything
    "iDisplayLength": -1,
    "aaSorting": [[ 0, "desc" ]] // Sort by first column descending
});
51
shaheenery

DataTablesは、デフォルトのソート方法としてアルファベット順を使用します。これが実際にここで起こることです。

2つの解決策があります。

  • 独自の日付ソート方法を定義する
  • Unixタイムスタンプ（1970年1月1日から経過した秒数）の日付を含む非表示列を使用して、テーブルをソートします。

ユーザーが自分で列をソートできるようにする場合は、最初のソリューションを使用できます。

---------------最初の解決策：

DataTableプラグインに列の処理方法を指示する必要があります。 「aoColumns」プロパティを使用する必要があります。

$('table').dataTable({
    // display everything
    "iDisplayLength": -1,
    "aoColumns":[
        {"sType": "shaheenery-date"},
        {"bSortable": true},
        {"bSortable": true},
        {"bSortable": true},
        {"bSortable": true}
    ]
});

次に、「shaheenery-date-asc」および「shaheenery-date-desc」ソート方法を定義します。日付を数値形式に変換する関数「getDate」も必要です。

function getDate(a){
        // This is an example:
        var a = "Sunday November 6, 2011";
        // your code =)
        // ...
        // ...
        // You should output the result as YYYYMMDD
        // With :
        //   - YYYY : Year
        //   - MM : Month
        //   - DD : Day
        //
        // Here the result would be:
        var x = 20111106
        return x;
}

jQuery.fn.dataTableExt.oSort['shaheenery-date-asc'] = function(a, b) {      
        var x = getDate(a);
        var y = getDate(b);
        var z = ((x < y) ? -1 : ((x > y) ? 1 : 0));
        return z;
};

jQuery.fn.dataTableExt.oSort['shaheenery-date-desc'] = function(a, b) {
        var x = getDate(a);
        var y = getDate(b);
        var z = ((x < y) ? 1 : ((x > y) ? -1 : 0));
        return z;
    };

--------------- 2番目のソリューション：

「aoColumns」プロパティも使用します。今回は、DataTableに、Unixタイムスタンプの日付を含む最後の列を非表示にするように指示します。また、この列を「aaSorting」でソートするためのデフォルトの列として定義する必要があります。

$('table').dataTable({
    // display everything
    "iDisplayLength": -1,
    "aaSorting": [[ 5, "desc" ]],
    "aoColumns":[
        {"bSortable": false},
        {"bSortable": true},
        {"bSortable": true},
        {"bSortable": true},
        {"bVisible": false}
    ]
});
13
paic_citron
oTable = $('#DataTables_Table_0').dataTable({   //table id -->DataTables_Table_0

    iVote: -1,  //field name 
    "bRetrieve":true

});

 oTable.fnSort( [ [1,'desc'] ] );   // Sort by second column descending
2
Divyesh

データテーブルの最新バージョンを使用すると、列インデックスでソートできます

var data_table = $('#data-table').DataTable();
data_table.order( [7,'desc'] ).draw();

お役に立てれば。

1
Darren Hall
 $（ '＃id'）。dataTable（{
 "bSort"：true、
 "aoColumnDefs"：
 'bSortable'：false、
 ' aTargets '：[1]} 
 
}）;
1
Andrés Rosales Campos

既存の回答では、従来のDataTables構文を使用しています。バージョン1.10以降では、次の構文を使用する必要があります。

$('table').dataTable({
    "pageLength": -1,  //display all records
    "order": [[ 0, "desc" ]] // Sort by first column descending
});

参照：

1
devlin carnate