jQueryのDataTablesライブラリ完全ガイド：効率的なデータ表示と操作

ウェブ開発におけるデータの表示と管理は、ユーザー体験を向上させる上で重要な要素の一つです。特に大量のデータを取り扱う場合、これらを整理し、直感的に操作可能な形で提供することが求められます。ここで登場するのが、DataTablesライブラリです。

この記事では、DataTablesの実際の使用方法を紹介します。

メニュー	値段	評価	カテゴリ
ロイヤルミルクティー	¥600	★★★★★	ドリンク
サーモンアボカドロール	¥1200	★★★★☆	食事
モンブラン	¥800	★★★★★	デザート

DataTablesとは？

DataTablesは、jQueryのプラグインで、HTMLテーブルを高度にインタラクティブなデータグリッドに変換します。

ページネーション、インスタント検索、複数の列でのソートなどの機能を備えており、開発者はわずかなコードでこれらの機能をウェブページに組み込むことができます。

DataTablesのホームページは以下の通りです。

DataTables | Table plug-in for jQuery

実装例

使う前に実装例を見てみましょう。

普通のHTMLテーブルと比べると、検索、ソート、ページングなどのインタラクティブな機能を提供しています。動的なデータの扱いが容易になります。

図書館の書籍リスト

タイトル	著者	分類	出版年	ISBN
ノルウェイの森	村上春樹	小説	1987	4-06-203515-4
吾輩は猫である	夏目漱石	小説	1905	なし
羅生門	芥川龍之介	短編小説	1915	なし
タイトル	著者	分類	出版年	ISBN

なぜDataTablesを使うのか？

迅速なセットアップ: jQueryとの連携により、既存のHTMLテーブルに数行のコードを追加するだけで、DataTablesの機能を利用できます。
柔軟性: カスタマイズが容易であり、多様なデータソース（配列、JSONファイル、SQLデータベース）からのデータフィードに対応しています。
拡張性: 数多くの拡張機能を利用して、さらに詳細な機能を追加することが可能です。
アクセシビリティ: WAI-ARIAのサポートにより、スクリーンリーダーを使用するユーザーにも優れたアクセスを提供します。

導入方法

ほかのライブラリと同じです。<head>セクションに追加するだけです。

jQueryは必須です。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
</head>

基本的な使い方

まず、id付きのHTMLテーブルを作成します。

内容は適当に書きました。

<table id="example">
 <thead>
        <tr>
            <th>氏名</th>
            <th>年齢</th>
            <th>国籍</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>太郎</td>
            <td>18</td>
            <td>日本</td>
        </tr>
        <tr>
            <td>ハク</td>
            <td>27</td>
            <td>中国</td>
        </tr>
        <tr>
            <td>ソン</td>
            <td>30</td>
            <td>韓国</td>
        </tr>
    </tbody>
</table>

テーブルが準備できたら、以下のJavaScriptを使用してDataTablesを初期化します。

$(document).ready(function() {
    $('#example').DataTable();
});

これで、基本的なDataTablesの設定は完了です。

こんな感じです。

languageをちゃんと設定しないと、英語になっています。

氏名	年齢	国籍
太郎	18	日本
ハク	27	中国
ソン	30	韓国

データ

HTMLにテーブルを書くと長くなるので、JavaScriptで配列にして、それをdataに設定できます。

<table id="example">
 <thead>
        <tr>
            <th>氏名</th>
            <th>年齢</th>
            <th>国籍</th>
        </tr>
    </thead>
    <tbody>
        <!-- データはJavaScriptで挿入されます -->
    </tbody>
</table>
<script>
$(document).ready(function() {
    var tableData = [
        ["太郎", "18", "日本"],
        ["ハク", "27", "中国"],
        ["ソン", "30", "韓国"]
    ];
    
    var table = $('#example').DataTable();
    
    // 配列の各行について、データをテーブルに追加
    tableData.forEach(function(rowData) {
        table.row.add(rowData).draw();
    });
});
</script>

カスタマイズ

DataTablesには非常に多くのカスタマイズオプションがあり、それらを利用して表を自分のニーズに合わせて調整することができます。

言語設定

DataTablesは多言語対応しており、languageオプションを使用して、表示されるテキストを翻訳できます。

$('#example').DataTable({
  "language": {
    "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
  }
});

ソート設定

特定の列でのソートを無効にする、複数列でのソートを可能にするなど、ソートのカスタマイズが可能です。

$('#example').DataTable({
  "columnDefs": [
    { "orderable": false, "targets": [0, 1] } // 1列目と2列目のソートを無効
  ],
  "order": [[2, 'asc']] // 初期ソートは3列目で昇順
});

ページネーション設定

ページネーションのスタイルや、1ページに表示する行数などを設定できます。

$('#example').DataTable({
  "pagingType": "simple_numbers", // シンプルな数字型のページネーション
  "pageLength": 10 // 1ページあたり10行を表示
});

検索とフィルタリング設定

デフォルトの検索機能を無効にしたり、検索条件に応じたフィルタリングを行うオプションです。

$('#example').DataTable({
  "searching": false, // 検索ボックスを無効
  "search": {
    "caseInsensitive": false // 大文字小文字を区別する検索
  }
});

テーブル情報表示設定

テーブルの情報表示をカスタマイズできます。

$('#example').DataTable({
  "info": false // テーブルの情報表示を非表示にする
});

DOM配置設定

DOMレイアウトのカスタマイズを行い、ページネーション、検索ボックス、情報表示などの位置を変更できます。

$('#example').DataTable({
  "dom": '<"top"i>rt<"bottom"flp><"clear">' // DOM構造をカスタムレイアウトにする
});

カスタムスタイリング

DataTablesはjQuery UIやBootstrapなど、さまざまなフレームワークと組み合わせて利用することができ、それぞれのフレームワークに合わせたスタイリングが可能です。

jQuery UIとの組み合わせ

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

$('#example').DataTable({
  "jQueryUI": true
});

Bootstrapとの組み合わせ

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">

$('#example').DataTable({
  "bootstrap": true
});

これらのオプションはあくまでも一例です。さらに高度なカスタマイズやAPIの使用方法については、DataTablesの公式ドキュメンテーションやコミュニティフォーラムを参照して、さらに詳細な情報を得てください。

拡張機能

DataTablesは拡張機能によって、その機能を大幅に拡大することが可能です。

拡張機能を使用することで、より専門的なニーズに応えるための多くの追加機能を利用できます。

以下に、よく使われるいくつかの拡張機能とその利用方法について説明します。

Buttons

ユーザーがテーブルデータをPDF、CSV、Excelにエクスポートしたり、印刷したりできるボタンを追加します。

$('#example').DataTable({
  dom: 'Bfrtip',
  buttons: [
    'copy', 'csv', 'excel', 'pdf', 'print'
  ]
});

Responsive

この拡張機能により、テーブルはビューポートのサイズに応じて適切に調整され、小さなデバイスでの可読性が向上します。

$('#example').DataTable({
  responsive: true
});

FixedHeader

スクロール中にもテーブルのヘッダーが常に表示されるようになります。

$('#example').DataTable({
  fixedHeader: true
});

Scroller

大量のデータを持つテーブルのために、従来のページネーションをスクロールによるインフィニットスクロールに置き換えます。

$('#example').DataTable({
  scroller: true
});

RowReorder

行の再順序付けを可能にします。ユーザーはドラッグアンドドロップで行を動かすことができます。

$('#example').DataTable({
  rowReorder: true
});

Select

テーブルの行、列、セルをクリック可能にし、選択状態を管理します。

$('#example').DataTable({
  select: true
});

まとめ

DataTablesの基本的なセットアップから、いくつかの拡張機能の使用例に至るまで、その詳細な使い方を紹介しました。実際にこれらのコードを自分のプロジェクトに組み込んで、動的でインタラクティブなテーブルを簡単に作成することができます。さらに詳細な情報や高度な設定方法については、DataTablesの公式ドキュメンテーションを参照してください。

jQueryのDataTables【完全ガイド】