JSFでDatatablesを使う

JSFでテーブルを動的に表示したいって時にDatatablesを使ってみたので使い方メモ。
PrimefacesのDatatableもありですが、独自タグだとデザインチームと連携しずらいのでjQueryにしました。

## サンプルコード
タグ中のコメントにも書いてますが、threadタグが不足してたり、定義した列数が一致してないと動かなくなりますので注意。

```xhtml:sample.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="ja" jsf:id="html" xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:jsf="http://xmlns.jcp.org/jsf" xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

  <head jsf:id="head">
    <title>Datatables</title>

    <script type="text/javascript" src="#{bean.resourcesPath}/jquery/jquery-3.3.1.min.js" />
    <script type="text/javascript" src="#{bean.resourcesPath}/js/datatables.min.js" />
    <script type="text/javascript" src="#{bean.resourcesPath}/js/datatables_util.js" />

  </head>

  <body jsf:id="body">

        <div>
            <div>
                <div>
                    <div>
                        <ui:remove>
                            <!-- ※<table>タグの注意点※
                            ・theadタグを定義しないと動かなくなります
                            ・theadとtbodyの列数を統一しないと動かなくなります -->
                        </ui:remove>
                        <table id="sample_table">
                            <thead>
                            <tr>
                                <th>名前</th>
                                <th>日付</th>
                                <th>選択</th>
                                <th>ステータス</th>
                            </tr>
                            </thead>
                            <tbody>
                            <ui:repeat
                                    value="#{bean.list}"
                                    var="data">
                                <tr>
                                    <td>#{data.name}</td>
                                    <td><span
                                            jsfc="h:outputText"
                                            value="#{data.date}">
                                    </span></td>
                                    <td>#{data.selected}</td>
                                    <td><span
                                            jsfc="h:outputText"
                                            value="#{data.status}" /></td>
                                </tr>
                            </ui:repeat>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

  </body>
</html>
```

```js:datatables_util.js
// Datatablesの設定
jQuery.noConflict()(function($){
  // 日本語化
     $.extend( $.fn.dataTable.defaults, {
         language: {
             emptyTable        : "データが登録されていません。",
             info              : "_START_ - _END_ / _TOTAL_ 件",
             infoEmpty         : "",
             infoFiltered      : "(_MAX_ 件からの絞り込み表示)",
             infoPostFix       : "",
             thousands         : ",",
             lengthMenu        : "1ページあたりの表示件数: _MENU_",
             loadingRecords    : "ロード中",
             processing        : "処理中...",
             search            : "",
             searchPlaceholder : "検索",
             zeroRecords       : "該当データなし",
             paginate : {
             previous : '<i class="icon-arrow-left""></i>',
             next     : '<i class="icon-arrow-right"></i>'
             }
         }
     });

    // <table>のidに設定した名前
     $("#sample_table").DataTable({
         bPaginate     : true,
         searching     : true,
         displayLength : 5,
         lengthMenu    : [ 5, 10, 20, 30, 40, 50 ],
         order         : [[1, "asc"]],
         pagingType    : "simple"
     });
});
```

デザイナーさんとコーダーさんにイカしたデザインを作ってもらうといい感じになります。