【JavaScript】DataTablesの使い方

DataTablesはHTMLで作成した表にページング機能やソート機能を追加できるjQueryライブラリです。

さまざまなオプションが提供されているため、外観や機能などの編集も簡単です。

基本的な使い方

DataTablesを使うにはDataTablesの導入が必要です。また、jQueryも合わせて導入しておくといいでしょう。

CDNで導入する場合は以下コードをHTMLファイルのheadタグに追加してください。

HTML

// jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
// DataTables
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet"/>

続いてDataTablesを適用するための表を作成します。

今回は使用していませんがtfootタグを使用することも可能です。

HTML

<table id="table">
  <thead>
    <tr>
      <th>Id</th>
      <th>名前</th>
      <th>値段</th>
      <th>在庫</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>りんご</td>
      <td>100</td>
      <td>120</td>
    </tr>
    <tr>
      <td>2</td>
      <td>ばなな</td>
      <td>200</td>
      <td>10</td>
    </tr>
    <tr>
      <td>3</td>
      <td>ぶどう</td>
      <td>500</td>
      <td>85</td>
    </tr>
  </tbody>
</table>

最後にJavaScriptファイルを編集します。

DataTablesを適用したいテーブル要素に対してDataTable()処理を実行します。

JavaScript

// jQueryで記述する場合
$("#table").DataTable();
// JavaScriptで記述する場合
new DataTable('#table');

完成系は以下のようになります。

See the Pen data-table1 by Usagi (@naniwa_usagi) on CodePen.

オプションの使い方

オプションの設定は以下のように{}の中に記述します。

カンマ区切りで複数指定することも可能です。

JavaScript

// jQueryで記述する場合
$("#table").DataTable({
 // オプション
});
// JavaScriptで記述する場合
new DataTable('#table', {
 // オプション
});

よく使われるのは、dataオプションではないでしょうか。
JavaScript内でソースを用意しDataTablesに反映することができます。

たとえば以下のようなデータを用意します。

JavaScript

// テーブルの中身
var tableData = [
  [1, "りんご", 100, 120],
  [2, "ばなな", 200, 10],
  [3, "ぶどう", 500, 85],
  [4, "みかん", 300, 20],
  [5, "もも", 400, 5]
];

HTMLの表についてはtbody部分が不要になります。

HTML

<table id="table">
  <thead>
    <tr>
      <th>Id</th>
      <th>名前</th>
      <th>値段</th>
      <th>在庫</th>
    </tr>
  </thead>
</table>

dataオプションを使い、表にデータを反映します。

JavaScript

// テーブルの作成
$("#table").DataTable({
  "data": tableData
});

以下はdataオプションのサンプルです。

See the Pen data-table2 by Usagi (@naniwa_usagi) on CodePen.

その他にもよく使われる使用例を紹介します。

ページングを無効にする

JavaScript

$("#table").DataTable({
  paging: false
});

表を横スクロール可能にする

JavaScript

$("#table").DataTable({
  scrollX: 400
});

表を縦スクロール可能にする

JavaScript

$("#table").DataTable({
  scrollY: 400
});

表の並び順を変更する

未指定の場合は1番目のカラムの昇順（"order": [0, "asc"]）と同等になります。

JavaScript

$("#table").DataTable({
  "order": [2, "desc"] // 3番目のカラムの降順
});

まとめ

DataTablesの使い方について解説しました。

オプションの使用例はほんの一部ですのでDataTablesの公式リファレンスも是非確認してみてください。

今回は以上です。