HTML （特に jQuery や Bootstrap を併用する HTML）で表を扱う場合に便利＆有名な DataTables という jQuery プラグインがあります：



元の HTML にほんの数行追加するだけで、簡単に各列でソートできるようにしたり、ページネーションを追加したり、検索フィルタを追加することができるようになる、というスグレモノです：



ほんの数行で簡単にできてしまう点はいいのですが、簡単に実現できるせいか、その見た目をカスタマイズしようとすると、ちとややこしめです。色々調べてみた限りでのカスタマイズ（特に検索フィルタ部分のカスタマイズ）を紹介します。


【基本 HTML】
今回カスタマイズする表は以下のような内容とします：

<table id="mytable" class="table table-bordered">
  <thead>
    <tr><th>#</th><th>name</th><th>age</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>鈴木</td><td>30</td></tr>
    <tr><td>2</td><td>山本</td><td>31</td></tr>
    <tr><td>3</td><td>佐藤</td><td>33</td></tr>
    <tr><td>4</td><td>木村</td><td>28</td></tr>
    <tr><td>5</td><td>井上</td><td>22</td></tr>
    <tr><td>6</td><td>船橋</td><td>20</td></tr>
    <tr><td>7</td><td>近藤</td><td>30</td></tr>
    <tr><td>8</td><td>藤原</td><td>31</td></tr>
    <tr><td>9</td><td>吉田</td><td>40</td></tr>
    <tr><td>10</td><td>鈴木</td><td>35</td></tr>
    <tr><td>11</td><td>山木</td><td>31</td></tr>
    <tr><td>12</td><td>島田</td><td>33</td></tr>
    <tr><td>13</td><td>上原</td><td>19</td></tr>
    <tr><td>14</td><td>野島</td><td>20</td></tr>
    <tr><td>15</td><td>野崎</td><td>41</td></tr>
    <tr><td>16</td><td>奥村</td><td>39</td></tr>
    <tr><td>17</td><td>佐原</td><td>32</td></tr>
    <tr><td>18</td><td>千葉</td><td>22</td></tr>
    <tr><td>19</td><td>池上</td><td>25</td></tr>
    <tr><td>20</td><td>水森</td><td>29</td></tr>
  </tbody>
</table>

Bootstrap を併用して、table & table-bordered クラスを適用しています（<table> の id は "mytable" としています）。ちなみにこのままだと見た目は以下のようになります：

#	name	age
1	鈴木	30
2	山本	31
3	佐藤	33
4	木村	28
5	井上	22
6	船橋	20
7	近藤	30
8	藤原	31
9	吉田	40
10	鈴木	35
11	山木	31
12	島田	33
13	上原	19
14	野島	20
15	野崎	41
16	奥村	39
17	佐原	32
18	千葉	22
19	池上	25
20	水森	29

ではこの表を DataTables プラグインを使ってカスタマイズしていきます。


【普通に適用】
特別なカスタマイズなしに DataTables を適用します。まずは DataTables の JavaScript と CSS を CDN からロードします（この中に Bootstrap も含まれているようです）：

<link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/>
<script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dtー1.10.11/datatables.min.js"></script>

次に表の id（="mytable"）を指定して、DataTable を適用します。この時点では特にオプションは指定していません：

<script>
$(function(){
  $('#mytable').DataTable({});
});
</script>

すると上記の表は以下のようになります：

#	name	age
1	鈴木	30
2	山本	31
3	佐藤	33
4	木村	28
5	井上	22
6	船橋	20
7	近藤	30
8	藤原	31
9	吉田	40
10	鈴木	35
11	山木	31
12	島田	33
13	上原	19
14	野島	20
15	野崎	41
16	奥村	39
17	佐原	32
18	千葉	22
19	池上	25
20	水森	29

特別に何を指定したわけでもないのですが、これだけで指定した表の各列の見出し部分をクリックすることでその列値によるソートが可能になります。またデフォルトで 10 件ずつのページネーションが行われ、次のページや前のページを少しずつ表示することができるようになります。更に表の右上でリアルタイム検索フィルタリングが有効になり、ここに入力した文字を含むレコードだけがフィルタリングされて表示されるようになります。ここまでが実質一行の追加でできてしまいました。

【日本語化】
上記例ではページネーションや検索フィルタリングが追加されましたが、よく見ると英語になっています。これを日本語化する方法はないでしょうか？　実はこれも簡単で、単に日本語化するだけであれば公開されているリソースファイルを使って以下の赤字部分を追加するだけです：

<script>
$(function(){
  $.extend( $.fn.dataTable.defaults, {
    language: {
      url: 'https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json'
    }
  });
  $('#mytable').DataTable({});
});
</script>

すると上記の表は以下のようになります：

#	name	age
1	鈴木	30
2	山本	31
3	佐藤	33
4	木村	28
5	井上	22
6	船橋	20
7	近藤	30
8	藤原	31
9	吉田	40
10	鈴木	35
11	山木	31
12	島田	33
13	上原	19
14	野島	20
15	野崎	41
16	奥村	39
17	佐原	32
18	千葉	22
19	池上	25
20	水森	29

指定したファイル（Japanese.json）をダウンロードして、この中身を別の日本語で書き換え、そのファイルを指定することで日本語訳を変更したり、リッチテキストにしたり、文字列ではなく画像を使ったりすることも可能です。


【ソート列の指定】
DataTables をオプション無しで適用すると表内のすべての列がソート対応になります。ここを明示的に変更することも可能です。例えば上記例で０列目（#）と２列目（age）ではソート可能にしたいが、１列目（name）ではソートできないようにしたい、という場合は以下のように（１列目のソート機能を無効に）します：

<script>
$(function(){
  $.extend( $.fn.dataTable.defaults, {
    language: {
      url: 'https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json'
    }
  });
  $('#mytable').DataTable({
    columnDefs: [{
      targets: [ 1 ],
      orderable: false
    }]
  });
});
</script>

すると上記の表は以下のようになります：

#	name	age
1	鈴木	30
2	山本	31
3	佐藤	33
4	木村	28
5	井上	22
6	船橋	20
7	近藤	30
8	藤原	31
9	吉田	40
10	鈴木	35
11	山木	31
12	島田	33
13	上原	19
14	野島	20
15	野崎	41
16	奥村	39
17	佐原	32
18	千葉	22
19	池上	25
20	水森	29

本当はもっと別の（パーツの位置変更とか）もできないわけじゃないけど、長くなりそうなので別の機会に。


 

タグ ：

jquery

datatables