もう悩まない！jQuery DataTablesの初期ソート無効化テクニック

2024-04-20

jQuery DataTablesで初期ソートを無効にする方法

以下、いくつかの方法をご紹介します。

order オプションを使用して、どの列でソートするかを指定できます。初期ソートを無効にするには、最初の列の order オプションを [[0, "asc"]] または [[0, "desc"]] 以外に設定します。

$(document).ready(function() {
  $('#example').DataTable({
    order: [[1, "asc"]] // 最初の列はソートしない
  });
});

sort オプションを使用して、特定の列のソート機能を無効にすることができます。

$(document).ready(function() {
  $('#example').DataTable({
    columns: [
      { data: 'name', sort: false }, // 名前列はソートしない
      { data: 'age' },
      { data: 'salary' }
    ]
  });
});

aaSorting オプションを使用する

古いバージョンの DataTables では、aaSorting オプションを使用して初期ソートを無効にすることができます。

$(document).ready(function() {
  $('#example').dataTable({
    aaSorting: [[1, 'asc']] // 最初の列はソートしない
  });
});

fnInitComplete コールバックを使用して、DataTables の初期化後にソートを無効にすることができます。

$(document).ready(function() {
  $('#example').DataTable({
    fnInitComplete: function(oSettings) {
      $(oSettings.nTable).DataTable().order([]); // すべてのソートをクリア
    }
  });
});

これらの方法のいずれかを使用して、jQuery DataTables で初期ソートを無効にすることができます。

補足

上記の例では、example という ID を持つテーブルを使用しています。使用するテーブルの ID に合わせて変更してください。
複数の列で初期ソートを無効にする場合は、上記の例を組み合わせて使用することができます。

jQuery DataTablesで初期ソートを無効にするサンプルコード

orderオプションを使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery DataTables - 初期ソートを無効にする</title>
  <link rel="stylesheet" href="//cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
  <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="//cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
</head>
<body>
  <table id="example">
    <thead>
      <tr>
        <th>名前</th>
        <th>年齢</th>
        <th>給与</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>田中</td>
        <td>35</td>
        <td>100万円</td>
      </tr>
      <tr>
        <td>佐藤</td>
        <td>28</td>
        <td>80万円</td>
      </tr>
      <tr>
        <td>鈴木</td>
        <td>42</td>
        <td>120万円</td>
      </tr>
    </tbody>
  </table>

  <script>
    $(document).ready(function() {
      $('#example').DataTable({
        order: [[1, "asc"]] // 最初の列はソートしない
      });
    });
  </script>
</body>
</html>

このコードでは、orderオプションを使用して、最初の列 (年齢) でソートするように設定しています。最初の列の order オプションが [[0, "asc"]] または [[0, "desc"]] 以外に設定されているため、最初の列はソートされません。

sortオプションを使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery DataTables - 初期ソートを無効にする</title>
  <link rel="stylesheet" href="//cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
  <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="//cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
</head>
<body>
  <table id="example">
    <thead>
      <tr>
        <th>名前</th>
        <th>年齢</th>
        <th>給与</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>田中</td>
        <td>35</td>
        <td>100万円</td>
      </tr>
      <tr>
        <td>佐藤</td>
        <td>28</td>
        <td>80万円</td>
      </tr>
      <tr>
        <td>鈴木</td>
        <td>42</td>
        <td>120万円</td>
      </tr>
    </tbody>
  </table>

  <script>
    $(document).ready(function() {
      $('#example').DataTable({
        columns: [
          { data: 'name' },
          { data: 'age', sort: false }, // 年齢列はソートしない
          { data: 'salary' }
        ]
      });
    });
  </script>
</body>
</html>

このコードでは、columnsオプションを使用して、各列のオプションを個別に設定しています。age 列の sort オプションを false に設定することで、その列のソート機能を無効にしています。

fnInitCompleteコールバックを使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery DataTables - 初期ソートを無効にする</title>
  <link rel="stylesheet" href="//cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
  <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="//cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
</head>
<body>
  <table id="

jQuery DataTablesで初期ソートを無効にするその他の方法

CSSを使用する

th.sorting セレクタを使用して、ソートインジケータを非表示にすることができます。

th.sorting {
  pointer-events: none; /* ソート機能を無効にする */
}

disableSortingオプションを使用する (v1.13以降)

$(document).ready(function() {
  $('#example').DataTable({
    columns: [
      { data: 'name' },
      { data: 'age', disableSorting: true }, // 年齢列はソートしない
      { data: 'salary' }
    ]
  });
});

v1.10以降の DataTables では、preInit オプションを使用して、DataTables の初期化前にオプションを変更することができます。

$(document).ready(function() {
  $('#example').DataTable({
    preInit: function(settings) {
      settings.order = []; // すべてのソートをクリア
    }
  });
});