DataTablesでBootstrapを利用する
yamamoto受託開発担当のRyuです。
今回はDataTablesでBootstrapを利用する方法を紹介します。
Bootstrapを使うことで流行のデザインを容易にDataTablesに適用することができます。
<html><head>
<link rel="stylesheet" href="dataTables/css/jquery.dataTables.css">
<!-- Bootstrap CSS
<link rel="stylesheet" href="bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/3.0.3/css/bootstrap-theme.min.css">
-->
<style type="text/css">
<!--
body {width: 400px; margin-left: 20px;}
-->
</style>
</head>
<body>
<h5>DataTablesのTwitter Bootstrapサンプルです。</h5>
<table class="table table-striped table-bordered" 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-2.0.3.min.js"></script>
<script type="text/javascript" src="dataTables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
// 少しだけDataTablesの内容を書き換える必要があります。
$('#sample_table').dataTable( {
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
} );
$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline"
} );
} );
</script>
</body></html>
Bootstrapの外観
Bootstrapはメジャーなフレームワークでテンプレートも豊富にあるので、是非活用してみてください。
