jquery - jQueryデータテーブルでの列の並べ替え

Question

jQueryデータテーブルプラグインの列の並べ替えとそれを制御するさまざまな方法を実行しました。上矢印アイコンをクリックすると昇順と下矢印アイコンの並べ替えが行われるように並べ替えを制御できるクエリがあります。降順で並べ替えますか？

Answer 1

datatablesバージョンに応じて、2 つの方法があります。

EDIT for Datatables バージョン 1.9 以下

を使用する必要がありますfnHeaderCallback。このコールバックを使用するthと、テーブル ヘッダーのすべての要素を編集できます。

私はあなたのために実用的な例を作成しました。ライブ: http://live.datatables.net/oduzov コード: http://live.datatables.net/oduzov/edit#javascript,html

これはその背後にあるコードです（コードを表示するにはスニペットを開いてください）：

$(document).ready(function($) {
  var table = $('#example').dataTable({
    "fnHeaderCallback": function(nHead, aData, iStart, iEnd, aiDisplay) {
      // do this only once
      if ($(nHead).children("th").children("button").length === 0) {
        
        // button asc, but you can put img or something else insted
        var ascButton = $(document.createElement("button"))
          .text("asc");
        var descButton = $(document.createElement("button"))
          .text("desc"); // 

        ascButton.click(function(event) {
          var thElement = $(this).parent("th"); // parent TH element
          var columnIndex = thElement.parent().children("th").index(thElement); // index of parent TH element in header

          table.fnSort([
            [columnIndex, 'asc']
          ]); // sort call

          return false;
        });

        descButton.click(function(event) {
          var thElement = $(this).parent("th");
          var columnIndex = thElement.parent().children("th").index(thElement);

          table.fnSort([
            [columnIndex, 'desc']
          ]);

          return false;
        });

        $(nHead).children("th").append(ascButton, descButton);
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://legacy.datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<table id="example" class="display" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$3,120</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Director</td>
      <td>Edinburgh</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$5,300</td>
    </tr>
  </tbody>
</table>

Datatables バージョン 1.10 以降の場合

コールバックに新しい名前が付けられましたheaderCallback。それ以外はすべて同じなので、レガシー API の代わりに新しいコールバックを使用します。