多機能テーブルDataTablesを使う
yamamoto受託開発担当のRyuです。
今回はJQueryプラグインの一つであるDataTablesの紹介をしていきます。
DataTablesとはテーブルに検索やソート、ページ切り替えなどを簡単に追加してくれる多機能なプラグインです。
公式ページにはAPIドキュメントやサンプルも揃っているのでJQuery利用者には非常に有難いのではないでしょうか。
まずはこんな感じのHTMLを書いてみました。
<html><head>
<link rel="stylesheet" href="dataTables/css/jquery.dataTables.css">
<style type="text/css">
<!--
body {width: 400px;}
#sample_table {border: 1px solid black;}
-->
</style>
</head>
<body>
<h5>DataTablesのサンプルです。</h5>
<table id="sample_table">
<thead>
<tr><th>No.</th>
<th>帳票名</th>
<th>作成日</th></tr>
</thead>
<tbody>
<tr><td>1</td>
<td>aaa.pdf</td>
<td>2012/09/01</td></tr>
<tr><td>2</td>
<td>bbb.pdf</td>
<td>2012/09/02</td></tr>
<tr><td>3</td>
<td>ccc.pdf</td>
<td>2012/09/03</td></tr>
</tbody>
</table>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="dataTables/js/jquery.dataTables.min.js"></script>
<script>
$("#sample_table").dataTable();
</script>
</body></html>
defaultの外観
DataTablesは対象のテーブルセレクタにdataTable()関数を実行するだけで簡単に利用することができます。
この状態で行ソート、検索、ページ切替の機能が利用できます。
デフォルトの状態では横幅は上位タグの幅に、また枠線が無いので少しだけstyleを設定しています。
DataTablesを使用するテーブルには必ず <thead> タグと <tbody> タグが必要です。
さて、これだけでも機能としては十分ですが、今度は表示されているメッセージを日本語化してみようと思います。
日本語化はdataTable()関数実行時に設定を行います。
$("#sample_table").dataTable({
"oLanguage": {
"sLengthMenu": "表示行数 _MENU_ 件",
"oPaginate": {
"sNext": "次のページ",
"sPrevious": "前のページ"
},
"sInfo": "全_TOTAL_件中 _START_件から_END_件を表示",
"sSearch": "検索："
}
});
日本語化
とりあえず初期表示で見えている所だけ日本語化してみました。
まだまだメッセージはありますので詳しくはこちらを参考にしてください。
次回はデザインの変更を紹介しようと思います。
