jQueryプラグインのDataTablesでチェックボックスを表示
受託開発担当のRyuです。
前回に続きJQueryプラグインのDataTablesについて紹介をしていきます。
今回は主に表示についてです。
DataTablesは非常に多くの表示設定を持っていて柔軟に見た目を変えることができます。
今回は代表的なものを紹介します。
まだまだ設定はありますので、詳しくはこちらを参考にしてください。
<link rel="stylesheet" href="dataTables/css/jquery.dataTables.css">
<link rel="stylesheet" href="css/start/jquery-ui-1.9.1.custom.min.css">
<style type="text/css">
<!--
body {
width: 500px;
}
#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>
<tr><td>4</td><td>ddd.pdf</td><td>2012/09/04</td></tr>
<tr><td>5</td><td>eee.pdf</td><td>2012/09/05</td></tr>
</tbody>
</table>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.min.js"></script>
<script type="text/javascript" src="dataTables/js/jquery.dataTables.min.js"></script>
<script>
$("#sample_table").dataTable({
// 処理中表示設定
// 大きなデータを読み込んだりソートした時、「処理中」メッセージを表示するか設定します。
bProcessing: true,
// 表示行数設定
iDisplayLength: 2,
// ページネーション種類
// two_button:進むと戻るのみ
// full_numbers:全ボタン表示
sPaginationType: "full_numbers",
// ソート時列クラス設定
// 現在ソートがかかっている列にcssクラスを指定するか設定します。
bSortClasses: false,
// jQuery UIデザイン使用設定
// jQuery UIのCSS設定(jquery-ui-1.x.x.custom.css)を表示に使用するかを設定します。
// jQuery UIのcssはhttp://jqueryui.com/themeroller/から自由にカスタマイズしてダウンロードすることができます。
bJQueryUI: true,
});
</script>
jQueryUIのデザインに！
さて、次はチェックボックスの表示です。
DataTablesには標準ではチェックボックスの表示機能は存在しないので、行追加時に動的にチェックボックスを追加する必要があります。
<html><head>
<meta charset="utf-8">
<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>ID</th><th>帳票名</th><th>チェック</th></tr>
</thead>
<tbody>
<tr><td></td><td>aaa.pdf</td><td>true</td></tr>
<tr><td></td><td>bbb.pdf</td><td>false</td></tr>
<tr><td></td><td>ccc.pdf</td><td>true</td></tr>
</tbody>
</table>
<p><br>
name:<input type="text" id="name" /><br>
check:<input id="check" type="checkbox"><br>
<input type="button" id="add" value="データ追加" />
</p>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="dataTables/js/jquery.dataTables.min.js"></script>
<script>
var sampleTable = $("#sample_table").dataTable({
// 列設定
aoColumns: [
// mData:列のデータを保持するオブジェクトの名前です。
// sWidth:列の横幅です。設定しなかった場合自動になります。
// bVisible:列の表示非表示です。非表示にした場合、該当列の値は内部データとしてDataTablesが保持するだけで、tdタグは生成されなくなります。
// sDefaultContent:初期値です。行を追加された時、値が設定されていないとここで指定した値となります。
{ mData: "id", sDefaultContent: "", bVisible: false },
{ mData: "name", sDefaultContent: "名前なし" },
{ mData: "check", sWidth: "100px" },
],
// 行追加時イベントです。
// nRow:追加された行のhtml要素です。
// aData:内部で保持している行の値です。
// iDataIndex:行番号です。
fnCreatedRow : function(nRow, aData, iDataIndex) {
// IDに行番号を設定します。
// 内部データはここで加工することが可能です。
aData.id = iDataIndex;
// bVisibleをfalseにされた列はnRowには含まれていないので、2列目(jqueryセレクタは0番から振られるので1)のtd要素を選択します。
var element = $("td:eq(1)", nRow);
// 要素には標準動作では内部データと同じ文字列が入力されているので、消去します。
element.text("");
// チェックボックスを生成します。
var checkbox = $("<input>")
.attr("type", "checkbox")
// idに行番号を付けます。
.attr("id", "check" + iDataIndex)
// check状態を設定します。
// aDataにはaoColumnsのmData要素で指定した名前で行データが入っています。
.attr("checked", aData.check == "true" ? true : false)
// チェックボックスが変更されたときのイベントを登録します。
.change(function() {
// 内部データをチェックされた値に書き換えます。
aData.check = $(this).is(":checked").toString();
});
// 要素にチェックボックスを登録します。
element.append(checkbox);
},
});
// データ追加
$("#add").click(function() {
data = {}
if ($("#name").val() != "") {
data.name = $("#name").val();
}
data.check = $("#check").is(":checked").toString();
// fnAddDataにデータを渡すことで行追加できます。
sampleTable.fnAddData(data);
});
</script>
</body></html>
チェックの有無でソート
注意して欲しいのはDataTablesはソートをするとき、画面上の値ではなく内部データを利用することです。
チェックボックスのチェックを変更したとき、内部データも一緒に更新しなければ正しいソート結果を得ることができません。
また検索についても内部データに対して行うので、今回だと「true」と入力すればチェックされている行を検索できます。
この応用でセレクトボックスやラジオボタン等も簡単に表示することができます。
次回はajaxを使用してデータを取得する方法を紹介しようと思います。
