DataTablesでBootstrapを利用する

2014年01月06日

受託開発担当の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>