HTMLのtableを、検索・並び替え・ページネーション付きの一覧にしたいときはDataTablesが手軽です。
この記事ではCDNで読み込む最小構成を使い、まず画面上で動くところまでを確認します。細かいカスタマイズに入る前の土台作りとして読める内容にしています。
公式ページ
DataTablesとは
DataTablesは、HTMLのtable要素を高機能な表に拡張するJavaScriptライブラリです。
主に以下のような機能を追加できます。
- ページネーション
- キーワード検索
- カラムごとの並び替え
- 表示件数の切り替え
- レスポンシブ対応やボタン追加などの拡張機能
ここでは、まずCDNを使って最小構成で動かします。
必要なファイル
DataTablesを使うには、基本的に以下を読み込みます。
- jQuery
- DataTablesのCSS
- DataTablesのJavaScript
2026年6月時点の安定版はDataTables 2.3.8です。公式サイトではDataTables 3のベータ版も案内されていますが、通常の記事や本番利用では安定版の2系を使うのが無難です。
サンプルコード
以下は、CDNからDataTablesを読み込んでHTMLテーブルに適用する最小サンプルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataTables Sample</title>
<link rel="stylesheet" href="https://cdn.datatables.net/2.3.8/css/dataTables.dataTables.min.css">
</head>
<body>
<table id="myTable" class="display">
<thead>
<tr>
<th>名前</th>
<th>年齢</th>
<th>都市</th>
</tr>
</thead>
<tbody>
<tr>
<td>山田 太郎</td>
<td>30</td>
<td>東京</td>
</tr>
<tr>
<td>佐藤 花子</td>
<td>25</td>
<td>大阪</td>
</tr>
<tr>
<td>鈴木 一郎</td>
<td>35</td>
<td>福岡</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/2.3.8/js/dataTables.min.js"></script>
<script>
new DataTable('#myTable');
</script>
</body>
</html>動作サンプル
以下のCodePenでは、上のサンプルコードと同じHTMLテーブルにDataTables 2.3.8を適用しています。検索欄や列見出しを操作して、初期化後の表示を確認できます。
ざっくり解説
基本的な使い方は以下の通りです。
- DataTablesのCSSを読み込む
- DataTablesを適用したい
tableタグを用意する theadとtbodyを正しく書く- jQueryとDataTablesのJavaScriptを読み込む
new DataTable('#myTable');で初期化する
DataTablesでは、テーブルのヘッダーとしてthead、データ部分としてtbodyを用意するのが基本です。tbody内でcolspanやrowspanを使うと正常に動かないことがあるため、まずはシンプルな表から始めるのがおすすめです。
jQuery形式で書く場合
従来の書き方として、jQueryのDataTable()メソッドを使うこともできます。
$(function () {
$('#myTable').DataTable();
});DataTables 2系では、公式トップページでも以下のような書き方が紹介されています。
new DataTable('#myTable');新しく書く場合は、まずnew DataTable()の形で覚えておくと分かりやすいです。
よく使うオプション
初期化時にオプションを渡すと、表示件数や日本語表示などを設定できます。
new DataTable('#myTable', {
pageLength: 5,
lengthMenu: [5, 10, 25, 50],
language: {
search: '検索:',
lengthMenu: '_MENU_件ずつ表示',
info: '_TOTAL_件中 _START_ から _END_ まで表示',
paginate: {
previous: '前へ',
next: '次へ'
}
}
});まとめ
DataTablesの導入で最低限必要なのは、CSSとJavaScriptの読み込み、対象のtable、そして初期化処理の3つです。
まずは以下の3点を押さえておけば、最小構成で動かせます。
- DataTablesのCSSとJavaScriptを読み込む
theadとtbodyを持つHTMLテーブルを用意するnew DataTable('#myTable');で初期化する
静的なHTMLテーブルでも、この形にしておけば検索、並び替え、ページネーションをすぐ使えます。まずは素のtableで動かし、必要に応じて日本語化や表示件数の調整を足していくのが扱いやすいです。
コメント