DataTablesプラグイン
http://datatables.net
１．データ（data2.txt）は下記の様なものを用意
{ "aaData": [
{
"id": "1",
"column1": "Trident",
"column2": "Internet Explorer 4.0",
"column3": "Win 95+",
"column4": "4",
"column5": "X",
"check": "true"
},
{
"id": "2",
"column1": "Trident",
"column2": "Internet Explorer 5.0",
"column3": "Win 95+",
"column4": "5",
"column5": "C",
"check": "false"
},
：
：
中略
：
：
{
"id": "12",
"column1": "Gecko",
"column2": "Camino 1.5",
"column3": "OSX.3+",
"column4": "1.8",
"column5": "A",
"check": "true"
}
] }
２．HTMLファイル
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var oTable = $('#example').dataTable(
{
"bProcessing": true,
"sAjaxSource": "sources/data2.txt",
"aoColumns": [
{ "mData": "id", sDefaultContent: "", bVisible: false },
{ "mData": "column1" },
{ "mData": "column2" },
{ "mData": "column3" },
{ "mData": "column4" },
{ "mData": "column5" },
{ "mData": "check"}
],
fnCreatedRow : function(nRow, aData, iDataIndex) {
// IDに行番号を設定
// 内部データを加工する場合はここで行う。
aData.id = iDataIndex;
// 5列目のtd要素をチェックボックスとして選択
// （bVisibleをfalseにされた列はnRowには含まれない？）
var element = $("td:eq(5)", nRow);
// チェックボックを表示する列のテキストを消去
element.text("");
// チェックボックスを生成
var checkbox = $("<input>")
.attr("type", "checkbox")
// idに行番号をつける
.attr("id", "check" + iDataIndex)
//classをつける
.attr("class", "checkbox")
// check状態を設定
// aDataにはaoColumnsのmData要素で指定した名前
.attr("checked", aData.check == "true" ? true : false)
// チェックボックスが変更されたときのイベントを登録
.change(function() {
// 内部データをチェックされた値に更新
aData.check = $(this).is(":checked").toString();
});
// 要素にチェックボックスを追加
element.append(checkbox);
}
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>id</th>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
<th>column5</th>
<th>check</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>