web-dev-qa-db-ja.com

jquery datatablesのデフォルトの並べ替え

Jqueryデータテーブルの2番目の列にデフォルトのソートを設定しようとしています。デフォルトでは、インデックス0でソートされます。"aaSorting": [[ 1, "asc" ]]構文ですが、最初のロードでは不要な列が強調表示されます。特定の列のデフォルトの並べ替えを設定するには、並べ替えが行われず、0インデックス列が使用されているかのように列を強調表示する必要はありません。

javascriptjquerysortingdatatables
54
Mike Flynn

いくつかのオプションがあります。

  1. DataTablesを初期化した直後に、TBODYのTD要素の並べ替えクラスを削除します。

  2. http://datatables.net/ref#bSortClasses を使用して、ソートクラスを無効にします。これに伴う問題は、ユーザーの並べ替え要求の並べ替えクラスを無効にすることです。これは、必要な場合とそうでない場合があります。

  3. サーバーに必要な並べ替え順序でテーブルを出力してもらい、デフォルトの並べ替えをテーブルに適用しないでください（aaSorting:[]）。

55
Allan Jardine

これを行う実際のコードは次のとおりです...

$(document).ready(function()
{
  var oTable = $('#myTable').dataTable();

  // Sort immediately with column 2 (at position 1 in the array (base 0). More could be sorted with additional array elements
  oTable.fnSort( [ [1,'asc'] ] );

  // And to sort another column descending (at position 2 in the array (base 0).
  oTable.fnSort( [ [2,'desc'] ] );
} );

列を強調表示しないようにするには、次のようにCSSを変更します。

table.dataTable tr.odd td.sorting_1 { background-color: transparent; }
table.dataTable tr.even td.sorting_1 { background-color: transparent; }
47
theJerm

FnSort関数を使用できます。詳細はこちらをご覧ください。

http://datatables.net/api#fnSort

15
Zeev Novikov

最適なオプションは、並べ替えを無効にし、（データベースまたは他のソースから）目的の並べ替え順序でデータをフィードすることです。これを「データテーブル」に追加してみてください： "bSort"：false

3
ealex_ru

私もこの問題を抱えていました。 stateSaveオプションを使用していたため、この問題が発生しました。
このオプションを削除すると、問題は解決します。

0
Majid Basirati

私のために働くこれを使用してください： "order"：[[1、 "ASC"]]、

0
Bassem Shahin

これは私のために働いた：

       jQuery('#tblPaging').dataTable({
            "sort": true,
            "pageLength": 20
        });
0
Versatile

次のコードを含めるだけです。

    $(document).ready(function() {
        $('#tableID').DataTable( {
            "order": [[ 3, "desc" ]]
        } );
    } 
);

例付きの完全なリファレンス記事：

https://datatables.net/examples/basic_init/table_sorting.html

0
Akshay Pethani

Datatablesは、この機能のHTML5 data- *属性をサポートしています。

ソート順で複数の列をサポートします（0ベース）

_<table data-order="[[ 1, 'desc' ], [2, 'asc' ]]">
    <thead>
        <tr>
            <td>First</td>
            <td>Another column</td>
            <td>A third</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>z</td>
            <td>1</td>
            <td>$%^&*</td>
        </tr>
        <tr>
            <td>y</td>
            <td>2</td>
            <td>*$%^&</td>
        </tr>
    </tbody>
</table>
_

これで、私のjQueryは単純に$('table').DataTables();になり、2番目と3番目の列がdesc/ascの順序でソートされます。

以下に、私が再利用している_<table>_のその他の素敵な属性を示します。

_data-page-length="-1"_はページ長をすべてに設定します（ページ長25の場合は25を渡します）...

_data-fixed-header="true"_ ...推測する

0
th3byrdm4n