DataTables初期ソート無効化

jQuery DataTables の初期ソートを無効にする方法の日本語解説

jQuery DataTables では、デフォルトで最初の列を昇順にソートします。この初期ソートを無効にするには、order オプションを使用します。

オプションの説明

• order: テーブルの初期ソートを設定します。

コード例

$(document).ready(function() {
  $('#myTable').DataTable({
    order: [] // 初期ソートを無効にする
  });
});

解説

1. $(document).ready(function() {}): ドキュメントが完全に読み込まれた後にコードを実行します。
2. $('#myTable').DataTable(): ID が "myTable" のテーブルを DataTables に初期化します。
3. order: []: 初期ソートを無効にします。空の配列を指定することで、すべての列のソートを無効にします。

備考

• デフォルトのソート方向: デフォルトのソート方向は昇順です。降順にするには、"desc" を指定します。
• 複数の列をソート: 複数の列をソートするには、order 配列に複数の要素を追加します。

例: 2列目を降順でソート

$(document).ready(function() {
  $('#myTable').DataTable({
    order: [[1, 'desc']]
  });
});

$(document).ready(function() {
  $('#myTable').DataTable({
    order: [] // 初期ソートを無効にする
  });
});

特定の列をソートする

$(document).ready(function() {
  $('#myTable').DataTable({
    order: [[1, 'desc']] // 2列目を降順でソート
  });
});

$(document).ready(function() {
  $('#myTable').DataTable({
    order: [[0, 'asc'], [2, 'desc']] // 1列目を昇順、3列目を降順でソート
  });
});

コード解説

例

• order: [[0, 'asc'], [2, 'desc']]: 1列目を昇順、3列目を降順でソートします。
• order: [[1, 'desc']]: 2列目を降順でソートします。
• order: []: 初期ソートを無効にします。

initComplete イベントを使用する

このイベントは、DataTables が初期化された後に発生します。このイベント内で、order() メソッドを使用して初期ソートを無効にすることができます。

$(document).ready(function() {
  $('#myTable').DataTable({
    initComplete: function() {
      this.api().order([]).draw();
    }
  });
});

columnDefs オプションを使用する

このオプションは、各列の属性を定義するために使用されます。orderable プロパティを false に設定することで、特定の列のソートを無効にすることができます。

$(document).ready(function() {
  $('#myTable').DataTable({
    columnDefs: [
      {
        targets: 0, // 1列目のソートを無効にする
        orderable: false
      }
    ]
  });
});

$(document).ready(function() {
  $('#myTable').DataTable({
    columns: [
      {
        orderable: false // 1列目のソートを無効にする
      },
      // 他の列の設定
    ]
  });
});

destroy() メソッドを使用して再初期化

DataTables を再初期化することで、初期ソートをリセットすることができます。

$(document).ready(function() {
  $('#myTable').DataTable();

  // 何かしらの処理後に再初期化
  $('#myTable').DataTable().destroy();
  $('#myTable').DataTable({
    order: [] // 初期ソートを無効にする
  });
});