DataTablesの使い方をサンプルコード付きで紹介!

DataTablesの使い方をサンプルコード付きで紹介します。DataTablesを使うことで、1ページに表示させるtableの件数を変えることができたり、ソート機能やキーワード検索機能が付いたりしてとても見やすいtableを作成することができます。

コンテンツ [表示]

  1. 1DataTablesとは?
  2. 2DataTablesの導入方法と日本語化
  3. 2.1ダウンロードする方法
  4. 2.2CDNを用いる方法
  5. 2.3DataTablesの日本語化
  6. 3DataTablesの使い方
  7. 4DataTablesのオプション
  8. 5まとめ

DataTablesとは?

DataTablesを使うことで、1ページに表示させるテーブル(表)の件数を変えることができたり、ソート機能やキーワード検索機能が付いたりし、見た目が整ったテーブルを作成することができます。

Photo byTeeFarm

DataTablesの導入方法と日本語化

まずDataTablesの導入方法について解説します。

DataTablesを導入するにはダウンロードする方法とCDNを読み込む方法の2通りあります。

ダウンロードする方法

ダウンロード先のリンクは以下になります。

datatables
datatablesのダウンロード先リンクです

ダウンロードしていただき、上記のサイトにも書かれている通り、以下のコードを読み込んでください。

読み込みコード

<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
 
<script type="text/javascript" src="DataTables/datatables.min.js"></script>

これでダウンロードによる導入は完了です。

CDNを用いる方法

DataTablesのCDNは以下となります。

DataTablesのCDN

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.23/datatables.min.css"/>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.23/datatables.min.js"></script>

この際必ずjQueryのCDNをDataTablesのCDNの前に記述してください。

そうでないとうまく表示されません。

こちらのコードを記載するだけで導入は完了です。

DataTablesの日本語化

DataTablesはデフォルトでは英語表記になっています。

DataTablesを日本語化する場合には以下のような記述が必要です。

DataTablesを日本語化

$(function () {
  $("#myTable").DataTable({
    "language": {
      "url": "//cdn.datatables.net/plug-ins/1.10.22/i18n/Japanese.json"
    }
  });
});

上記を記述することで日本語化することができます。

DataTablesの使い方

では日本語化されたDataTablesの使い方について解説します。

まずHTMLにてtableを作成します。

そしてそのtable要素に適当なidclassを付与します。

最後にJSにて$('#id名').DataTable();と記述すれば、DataTablesを使うことができます。

ここでは日本語化させるためにオプションとして以下を記述しています。

日本語化

"language": {
  "url": "//cdn.datatables.net/plug-ins/1.10.22/i18n/Japanese.json"
}

DataTablesのオプション

DataTablesには多くのオプションがあります。

主に使うものを少し解説します。

オプション例
lengthChange 1ページングあたりの表示件数変更機能を無効にする
ordering 列ソート機能を無効にする
info フィルター操作時の情報表示を無効にする
paging ページング機能を無効にする
searching フィルタリング機能を無効にする

それぞれどのような挙動をとるかは以下の記事にて詳しく解説しているので参照してください。

あわせて読みたい
DataTablesのオプションの使い方をご紹介!のイメージ
DataTablesのオプションの使い方をご紹介!
DataTablesのオプションの使い方をサンプルコード付きでご紹介します。DataTablesには多くのオプションが存在しています。その中でも特によく用いるものをピックアップしてご紹介します。

まとめ

いかがでしたでしょうか?

DataTablesを用いることで様々な機能が付き、さらに見た目が整ったテーブルをデザインすることができます。

ぜひDataTablesを使用してみてください。

【期間限定】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

西村卓也
ライター

西村卓也

HTML/CSS/JSに関する記事を執筆しています。よろしくお願いします。