JavaScriptライブラリの一つであるDatatablesの使い方について説明します。
目次
公式ページ
サンプルコード
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.5/css/dataTables.dataTables.min.css">
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>London</td>
</tr>
<tr>
<td>Bob Johnson</td>
<td>35</td>
<td>Paris</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/2.0.5/js/dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#myTable').DataTable();
});
</script>
</body>
</html>ざっくり解説
基本的な使い方は以下の通りです。
- DataTablesを使うためのCSS、JSをロードする
- DataTablesを設定したいtableタグにid属性を指定する
- JSで上記で設定したidを指定する
コメント