7

DataTablesを使用して一部のデータを表示していますが、うまく機能しますが、少しカスタマイズしたいので、方法がわかりません。

私がやりたいのは、ユーザーが列見出しをクリックしてその列を並べ替えるときです。最初は昇順ではなく降順で並べ替えます。これを行う方法はありますか？

4

6 に答える 6

12

これを見てください：DataTablesの並べ替え方向制御の例

あなたは次のようなことをすることができます：

$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [
            { "asSorting": [ "desc", "asc" ] }, //first sort desc, then asc
        ]
    } );
} );
于 2010-09-16T09:30:54.530 に答える
6

DataTablesの現在のバージョン（1.10）は、このデフォルトの並べ替え順序をorderSequence下のプロパティcolumnDefs（またはcolumns柔軟性が低い）で切り替える次の方法を提供します。

これがに関するドキュメントorderSequenceです。

"columnDefs": [
    { "orderSequence": [ "desc", "asc"], "targets": [ 1 ] },
]

また、言及しているように、インターフェースが非常に役立つ可能性のあるDESCまたはASCとしてクリックされた場合にのみ、列を強制的にソートすることができます。

私の場合、列の数が不確定な場合、最初のクリックで列を降順で並べ替える必要があったため、各列を明示的に定義したり、プログラムでインデックスの配列を作成したりするのclassではなく、列ヘッダーの名前をターゲットにするように例を切り替えることにしました。"targets":[1],"targets":[2],...[n]私が気にしたコラム。

ここに従って、複数の方法で列をターゲティングできます。

最終結果は、次のようなテーブル定義になります。

<table><thead><tr>
    <th class='descendFirst'>DESCend when first clicked</th>
    <th>a normally sorted ASC->DESC->... column</th>
    ...
</tr></thead></table>

そして、そのように権限を与えられたデータテーブル：

$("#table").dataTable({
    "columnDefs": [
        {"orderSequence": ["desc","asc"], "targets":"descendFirst" },
    ]
});

出来上がり！<th>最初に、「descendFirst」（任意に選択された説明的なクラス名）のクラスでマークされたすべての列で降順の並べ替えをクリックします。

于 2015-04-28T15:03:54.467 に答える
2

最後に空白を並べ替えることに応じて、これが私が思いついたものです-
（私は最初に空白を並べ替えるのが嫌いです!!）

これらのカスタムソート関数を含める

// custom sort functions
jQuery.fn.dataTableExt.oSort['text-blankslast-asc'] = function (x, y) {  
   x = (x == "") ? String.fromCharCode(255) : x;  
   y = (y == "") ? String.fromCharCode(255) : y;  
   return ((x < y) ? -1 : ((x > y) ? 1 : 0));  
};  

jQuery.fn.dataTableExt.oSort['text-blankslast-desc'] = function (x, y) {  
   x = (x == "") ? String.fromCharCode(0) : x;  
   y = (y == "") ? String.fromCharCode(0) : y;  
   return ((x < y) ? 1 : ((x > y) ? -1 : 0));  
};

ソートタグを適切な列に適用します

// init example  
$('#table2').dataTable({  
   "bJQueryUI": true,  
   "aoColumns": [  
      null,  
      { "sType": "text-blankslast" },  
      { "sType": "text-blankslast" },  
      { "sType": "text-blankslast" },  
      null  
   ]  
});
于 2012-02-01T09:56:58.710 に答える
2

Daveや私など、他の誰かがすべての列に並べ替え順序を設定する方法を探している場合は、次の方法で問題が解決する可能性があります。すべての列の並べ替え順序を変更するために、テーブルがインスタンス化された後に設定を変更するループを設定しました。

$(document).ready(function() {
    var example_table = $('#example').dataTable();
    $.each(example_table.dataTableSettings[0].aoColumns, function(key, column) {
        column.asSorting = [ "desc", "asc" ];
    } );
} );

お役に立てば幸いです。jQuery1.11.0およびDataTables1.10.0でテスト済み

于 2014-05-07T19:33:19.653 に答える
0

空白のものを最後に取得する唯一の方法は、少しハックすることです（ソートが正しく機能しているため）。

サーバーから空白の値を返す代わりに、「[空白]」のようなものを返します。

私はそれをテストしていませんが、英数字コードの後に​​角括弧が来ると確信しています。また、角括弧は伝統的に、まだ完成または確認されていないものを象徴しています。

于 2011-11-17T13:48:20.653 に答える
0

これは私のために働きます：

       settings = {
           aoColumnDefs: [
            {
                orderSequence: ["desc", "asc"],
                aTargets: ['_all']
            }
        ]};

        $('.dataTable').DataTable(settings);
于 2017-01-25T07:39:27.623 に答える