自分用メモ。

目的

jQuery DataTables を使ってサクッと多機能テーブルを作る。

実装

table を用意する

今回は HTML でべた書きされたテーブルをサクッと多機能化する。

<table id="my-table" class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
            <th scope="col">Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>1234567890</td>
            <td>Me</td>
            <td>Japan</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>37564</td>
            <td>You</td>
            <td>Japan</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>18782</td>
            <td>He</td>
            <td>United States</td>
        </tr>
    </tbody>
</table>

CSS を CDN で追加する

head ブロックに以下を追加する。

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">

バージョンはその時々で適当なやつを。

JS を CDN で追加する

jQuery より後ろに以下を追加する。

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>

バージョンはその時々で適当なやつを。

テーブルを初期化する

$(document).ready(function() {
    $('#my-table').DataTable();
});

できた！

あとはスタイルを調整したり、不要な機能を削除したりしてカスタマイズ。