※チェックボックスをOnした行の値を表示
前回のコードに下記の太文字の部分を追加
<!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);
}
} );
$('#check-button').click(function (){
var oTable = $('#example').dataTable();
$.each( oTable.fnGetData(), function(i, row){
if (row.check == "true") {
window.alert(row.id + " " + row.column1 + " " + row.column2 + " " + row.column3 + " " + row.column4 );
}
})
});
});
</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>
<button id="check-button">確認</button>
</body>
</html>