多機能テーブルDataTablesを使う

2012年09月18日

受託開発担当の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": "検索："
	}
});