【jQuery】DataTablesの簡単な使い方と注意点を紹介

最近フロントサイドまで手を出し始めているケイタです。今回はDataTablesの使い方を解説します。これまではcakePHPを使ったサーバーサイドエンジニアリングと、Pythonを使ったデータ分析がメインでしたが、ちょっとしたキッカケでフロントエンドも手を出すことにしました。

さて、フロントエンドは要素一つ一つを個別に調整していくなど細かい仕事が多いイメージがありました。そして実際にやってみて思ったことは「ああ、イメージ通り大変だった」ということでした。たくさんの要素(divとかspanとか)があって、それらのclassやidの管理をしっかりと行わないと無駄が多くなってしまうし、こだわろうと思えば要素を1つ単位で微調整しなければいけません。

いま作成しているのは合計5ページの簡単なウェブアプリですが、それでもサーバーとフロントを一人で同時にやると結構な時間がかかってしまうのです。前書きが長くなりましたが、そのような自力でやると大変な作業を省略してできるためのライブラリとしてjQueryという強い味方がいます。

そこで今回は、データ分析を行わなくとも必要になるであろう「表」をつくるjQueryライブラリ「DataTables」を紹介していきます。

インストール

まずはこちらのサイト（https://datatables.net/download/）に飛んでください。以下の手順でインストールをします。

Step 1. Choose a styling framework

ここでは、表のスタイルデザインを何で行うかを選択します。Bootstrapやその他のフレームワークで表を装飾したい場合は、該当する箇所をクリックして選択してください。

Step 2. Select packages

ここでは使用するjQueryのバージョンを指定します。特に理由がなければjQuery3でいいでしょう。

Extensions

他に利用したい機能があればこちらで選択できます。試しに使って見るだけであれば不要なのでとりあえずチェックしないでおきます。

Step 3. Pick a download method

「CDN」が一番簡単なので、「CDN」のタブを選択して出てきたコードを丸々コピーします。これをソースコードに貼り付けることによって実装していくのです。僕の場合はこのようなコードになっていました。

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>
 <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>

DataTablesを実装

今回はわかりやすくするために、以下のシンプルなコードをサンプルにします。

<table>
  <thead>
      <tr><th>ID</th><th>記事名</th><th>作者</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>1回目の投稿</td><td>HANAKO</td></tr>
    <tr><td>2</td><td>2回目の投稿</td><td>HANAKO</td></tr>
  </tbody>
</table>

これがこちらになります。

ID	記事名	作者
1	1回目の投稿	HANAKO
2	2回目の投稿	HANAKO

そして、DataTablesを実装したソースコードがこちらです。

<table id="data-table">
  <thead>
      <tr><th>ID</th><th>記事名</th><th>作者</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>1回目の投稿</td><td>HANAKO</td></tr>
    <tr><td>2</td><td>2回目の投稿</td><td>HANAKO</td></tr>
  </tbody>
</table>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>

<script>
$(function(){
  $("#data-table").DataTable({
    "paging": false,
  });
});
</script>

ID	記事名	作者
1	1回目の投稿	HANAKO
2	2回目の投稿	HANAKO

たった少しコードをいじるだけで、それっぽくなりました。デザインの関係でページ送りは無効にしていますが、10・25・50・100レコードごとにページを作る機能や、表をCSVやEXCELファイルで出力することも出来ます。ではコードの解説をしていきます。

手順は以下です。

1.DataTablesを使うテーブル<table>に対してidを付与する

まずは、DataTablesを使うテーブルに対して一意に識別できるようにidを付与します。名前は何でも構いません。この例では”data-table”にしてあります。

2.CSS、Jquery、DataTablesのjsライブラリをインストール

ソースコード11〜13行目が該当します。ここで、こちらのサイト(https://datatables.net/download/)でコピーしたソースコードと、jqueryをCDNでインストールしておきます。

3.1で付与したidに対してjQueryを発動させる

<script>
$(function(){
  $("#data-table").DataTable({
    "paging": false,
  });
});
</script>

後は上記のように、ターゲットのテーブルをidで指定してjQueryを発動させるだけです。DataTable()は特にオプション指定がなければ空でも問題はありません。今回はページ送りの機能を使わないように”paging”:falseを書いておきました。

オプション

日本語化

このページを見ている人はほとんどが日本人だと思いますので、日本語化の手順についても触れておきます。結論から言えば、下記のコードをjQueryの最初に書くだけです。（簡単！）

    // デフォルトの設定を変更
    $.extend( $.fn.dataTable.defaults, { 
        language: {
            url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
        } 
    });

全体のコードとしては

<table id="data-table">
  <thead>
      <tr><th>ID</th><th>記事名</th><th>作者</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>1回目の投稿</td><td>HANAKO</td></tr>
    <tr><td>2</td><td>2回目の投稿</td><td>HANAKO</td></tr>
  </tbody>
</table>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>

<script>
$(function(){
  // デフォルトの設定を変更
$.extend( $.fn.dataTable.defaults, {
    language: {
        url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
    }
}); 
  $("#data-table").DataTable({
    "paging": false,
  })
});
</script>

となります。

テーブルの設定

公式ページはこちらです。英語が見るのはだるいという人は、こちらのブログ「Data Tables超入門」に解説してあるのでぜひご覧ください。

注意点（僕がハマった点）

テーブルの構造はきっちりと守る

テーブルをhtmlで書く際に、<thead>や<tbody>を使わなかった場合、DataTablesが動きませんでした。上記にサンプルとして書いたように、以下の形式を厳守しましょう。

<table id="○○">
 <thead>
  <tr><th>○○</th>......<th>△△</th></tr>
 </thead>
 <tbody>
  <tr><td>○○</td>......<td>△△</td></tr>
  <tr><td>○○</td>......<td>△△</td></tr>
 </tbody>
</table>