jqueryでtableを整形する便利プラグインDataTables!

1 jqueryとDataTablesでお手軽table操作

jqueryとDataTablesでお手軽table操作

Webページで動的なデータの表を作ることってあると思うんですが、
ページング、検索、表示件数の制御などなど、
やることって大量にありますよね！？

それを一瞬で実装してくれるプラグインがこれ！！！
DataTables
jqueryを使っていて、tableを整形したい方には、
うってつけ(^o^)

使い方もとても簡単！

DataTablesでできる機能

・表示件数の制限
・検索
・ページング

とりあえず、これはいるだろうっていう機能は、
余裕で入ってます。

DataTablesの導入方法

jqueryのバージョンは、1.9.1です。
DataTablesのバージョンは、1.9.2です。

・HTML

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<script src="/js/jquery-1.9.1.min.js"></script>
	<script src="/js/jquery.dataTables-1.9.2.min.js"></script>
	<script>
		jQuery(function($){
			$(".datatable").dataTable();
		});
	</script>
	<title></title>
</head>
<body>
	<table class="datatable">
		<thead>
			<tr><th>No</th><th>果物</th></tr>
		</thead>
		<tbody>
			<tr><td>1</td><td>りんご</td></tr>
			<tr><td>2</td><td>パイナップル</td></tr>
			<tr><td>3</td><td>もも</td></tr>
			<tr><td>4</td><td>いちご</td></tr>
			<tr><td>5</td><td>なし</td></tr>
			<tr><td>6</td><td>ぶどう</td></tr>
			<tr><td>7</td><td>みかん</td></tr>
			<tr><td>8</td><td>グレープフルーツ</td></tr>
			<tr><td>9</td><td>バナナ</td></tr>
			<tr><td>10</td><td>キウイ</td></tr>
		</tbody>
	</table>
</body>
</html>

<!DOCTYPE html>

<head>

jQuery(function($){

$(".datatable").dataTable();

});

</script>

</head>

<body>

<thead>

</thead>

<tbody>

<tr><td>2</td><td>パイナップル</td></tr>

<tr><td>8</td><td>グレープフルーツ</td></tr>

</tbody>

</table>

</body>

</html>

・jqueryでdataTablesの初期設定

DataTablesのバージョンが1.9.X での設定になります。
1.10.X 以降で記述方法が多少変わるのでご注意下さい。

$('.datatable').dataTable({

	// 表示件数の選択肢
	"aLengthMenu": [25, 50, 100],
	// 表示件数のデフォルトの値
	"iDisplayLength": 25,
	// 表示状況をクッキーに保存するかどうか
	"bStateSave": true,
	// 検索対象にしない列の選択
	"aoColumnDefs": [
		  { "bSearchable": false, "aTargets": [ 0 ] }
	],
	// Y軸方向にtableをスクロールできるようにするのと、tableの高さの決定
	"sScrollY": 400,
	"sPaginationType": "bootstrap",
	// 表示される文字の決定
	"oLanguage": {
		// ページングの文字を決定
		"oPaginate": {
			"sFirst": "先頭",
			"sLast": "最後",
			"sNext": "次へ",
			"sPrevious": "前へ"
		},
		// tableに表示されるメッセージを設定
		"sEmptyTable": "データが登録されていません",
		"sInfo": "_TOTAL_ 件中 _START_ 件から _END_ 件までを表示",
		"sInfoEmpty": "",
		"sInfoFiltered": "(_MAX_ 件からの絞り込み表示)",
		"sInfoPostFix": "",
		"sInfoThousands": ",",
		"sLengthMenu": "1ページあたりの表示件数: _MENU_",
		"sLoadingRecords": "ロード中...",
		"sProcessing": "処理中...",
		"sSearch": "検索:",
		"sZeroRecords": "該当するデータが見つかりませんでした",
		"sLengthMenu": "_MENU_ 件 表示"
	}
} );