Datatables.jsで検索andページングandソート機能を実装

Data Tables使い方

Data Tablesを使用するには、jQuery、DataTablesのJSが必要になります。
以下リンクから必要な項目にチェックを付けるてページ下部のソースをコピーします。
「download」のタブに変更するとfileのダウンロードもできます。
https://www.datatables.net/download/index

Data Tables

<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"> <title>Data Tables</title></head><body> <table id="js-table" class="table table-bordered"> <thead> <tr> <th>ID</th> <th>項目1</th> <th>項目2</th> <th>期間</th> <th></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>ABC</td> <td>BCD</td> <td>11</td> <td>編集</td> </tr> <tr> <td>2</td> <td>BCD</td> <td>CDF</td> <td>50</td> <td>編集</td> </tr> <tr> <td>3</td> <td>CDF</td> <td>DFE</td> <td>20</td> <td>編集</td> </tr> <tr> <td>4</td> <td>DFE</td> <td>ABC</td> <td>10</td> <td>編集</td> </tr> </tbody> </table> <script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script> <script> jQuery(function($){ $(".js-table").DataTable(); }); </script></body></html>
HTML

head内に以下cssを読み込みます。
オリジナルのcssがある場合は不要です。

<link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css">

</body>の手前にjsを読み込み、以下scriptを入力します。
※head内でも問題ないです。

<script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script><script> jQuery(function($){ $(".js-table").DataTable() });</script>
JavaScript

Data Tablesの機能・カスタマイズ

今回、私が導入した経緯は、検索、ソート、ページングが簡単に実装できる機能があるからです。
まず、DataTablesを日本語化します。個別に言語設定することもできますが、以下の方法で簡単に設定することもできます。

<script> jQuery(function($){ $.extend( $.fn.dataTable.defaults, { language: { url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json" } }); $(".js-table").DataTable(); });</script>
JavaScript

個別に設定する場合は以下の記載をします。

<script> jQuery(function($){ $(".js-table").DataTable({ oLanguage: { sLengthMenu: "表示行数 _MENU_ 件", sZeroRecords: "データはありません。", oPaginate: { sNext: "次のページ", sPrevious: "前のページ" }, sInfo: "全_TOTAL_件中 _START_件から_END_件を表示", sInfoEmpty: "", sInfoFiltered: "（全 _MAX_ 件）", sInfoPostFix: "", sSearch: "検索：" } }); });</script>
JavaScript

その他パラーメータの説明か以下リンクから参照できます。
http://legacy.datatables.net/usage/features
今回、私が設定した機能は以下です。

  • 件数切り替え　無効
  • テーブルの列の幅の自動補正　無効
  • 表示件数を15に変更
  • 日本語のカスタマイズ
  • 一部の列のソート機能　無効
  • 一部の列を検索対象から外す
<script> jQuery(function($){ $(".js-table").DataTable({ lengthChange: false, displayLength: 15, bAutoWidth: false, columnDefs: [ { targets: 4, bSortable: false }, { targets: 4, searchable: false } ], oLanguage: { sLengthMenu: "表示行数 _MENU_ 件", sZeroRecords: "データはありません。", oPaginate: { sNext: "次のページ", sPrevious: "前のページ" }, sInfo: "全_TOTAL_件中 _START_件から_END_件を表示", sInfoEmpty: "", sInfoFiltered: "（全 _MAX_ 件）", sInfoPostFix: "", sSearch: "検索：" } }); });</script>
JavaScript

実装サンプル

read next