JSFでテーブルを動的に表示したいって時にDatatablesを使ってみたので使い方メモ。
PrimefacesのDatatableもありですが、独自タグだとデザインチームと連携しずらいのでjQueryにしました。
サンプルコード
タグ中のコメントにも書いてますが、threadタグが不足してたり、定義した列数が一致してないと動かなくなりますので注意。
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>
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"
});
});
デザイナーさんとコーダーさんにイカしたデザインを作ってもらうといい感じになります。