最終更新日: 2021年2月16日

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

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

コンテンツ [表示]

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"
    }
  });
});

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