DataTables オプション一覧

DataTables オプション一覧：設定と使い方をわかりやすく解説！

DataTables は強力な JavaScript ライブラリで、HTML テーブルを高度な機能を持つインタラクティブなテーブルに変換できます。この記事では、DataTables の基本的な使い方に加え、豊富なオプション設定とその活用方法を分かりやすく解説します。初心者から上級者まで、この記事を参考に DataTables をさらに活用しましょう。

DataTables とは？
- DataTables の概要とメリット
- DataTables の導入方法（CDN、ダウンロード）
基本的な使い方
- HTML でテーブルを作成
- JavaScript で DataTables を初期化
DataTables オプション一覧
- 表示設定
  - paging: ページネーションの有効/無効
  - pageLength: 1ページあたりの表示件数
  - searching: 検索ボックスの有効/無効
  - info: テーブル情報（表示件数など）の有効/無効
  - ordering: 並び替え機能の有効/無効
  - order: 初期並び順の設定
  - columnDefs: カラムごとの設定 (例: 特定カラムの非表示など)
- データ処理
  - data: データソースの指定 (JavaScript 配列、Ajax など)
  - ajax: サーバーサイド処理用の Ajax 設定
  - processing: データ読み込み中の表示設定
- コールバック関数
  - initComplete: 初期化完了時に実行される関数
  - drawCallback: 描画完了時に実行される関数
  - rowCallback: 行ごとに実行される関数
- 日本語化
  - language: 日本語化ファイルの設定
応用例
- Ajax を使用してサーバーサイドからデータを取得
- ボタンクリックで DataTables を更新
まとめ
- DataTables を使うメリット
- 更なる学習リソースの紹介

各オプション項目の詳細説明

3. DataTables オプション一覧

- 表示設定

paging: ページネーションの有効/無効を設定します。trueに設定するとページネーションが有効になり、falseに設定すると無効になります。
pageLength: 1ページあたりに表示するデータの件数を設定します。数値で指定します。
searching: 検索ボックスの有効/無効を設定します。trueに設定すると検索ボックスが表示され、falseに設定すると非表示になります。
info: テーブル情報（表示件数など）の表示/非表示を設定します。trueに設定するとテーブル情報が表示され、falseに設定すると非表示になります。
ordering: 並び替え機能の有効/無効を設定します。trueに設定するとカラムヘッダーをクリックして並び替えが可能になり、falseに設定すると並び替えができなくなります。
order: テーブルの初期並び順を設定します。[[カラム番号, 'asc'/'desc']] の形式で指定します。
columnDefs: カラムごとに詳細な設定を行います。targets, visible, orderable などのプロパティを使用して、特定カラムの非表示、並び替え不可などを設定できます。

- データ処理

data: データソースを指定します。JavaScript 配列や Ajax を使用してサーバーからデータを取得するなどができます。
ajax: サーバーサイド処理に Ajax を使用する場合の設定を行います。データを取得する URL や HTTP メソッドなどを指定します。
processing: データの読み込み中に表示する内容を設定します。trueに設定するとローディング表示などが行われます。

- コールバック関数

initComplete: DataTables の初期化が完了したタイミングで実行する関数を指定します。
drawCallback: テーブルの描画が完了したタイミングで実行する関数を指定します。ページネーションや検索などでテーブルが再描画されるたびに実行されます。
rowCallback: 各行が描画される際に実行する関数を指定します。行ごとにスタイルを変更するなどの処理に利用できます。

- 日本語化

language: DataTables を日本語化するための設定を行います。日本語化ファイルのパスを指定することで、検索ボックスやページネーションなどの表示を日本語に変更できます。

例

基本的なテーブル


<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>
    </tbody>
</table>


<script>
$(document).ready( function () {
    $('#myTable').DataTable();
} );
</script>

オプション設定例


<script>
$(document).ready( function () {
    $('#myTable').DataTable( {
        "paging": true,
        "pageLength": 10,
        "searching": true,
        "info": true,
        "ordering": true,
        "order": [[ 1, "asc" ]], // 年齢で昇順に初期ソート
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Japanese.json"
        }
    } );
} );
</script>

参考資料

DataTables に関するよくある質問

ページネーションの数を変更するにはどうすればよいですか？

"pageLength" オプションを使用して、1ページあたりに表示する行数を指定できます。たとえば、1ページあたり25行を表示するには、次のように設定します。


"pageLength": 25

特定の列を非表示にするにはどうすればよいですか？

"columnDefs" オプションを使用して、特定の列を非表示にすることができます。たとえば、インデックスが1の列（2番目の列）を非表示にするには、次のように設定します。


"columnDefs": [
    { "targets": [1], "visible": false }
]

DataTablesをAJAXとどのように使用しますか？

"ajax" オプションを使用して、サーバーからデータを取得できます。たとえば、"data.json" というファイルからデータを取得するには、次のように設定します。


"ajax": "data.json"

サーバー側でデータ処理を行う場合は、サーバーサイドの言語（例：PHP、Pythonなど）を使用してJSON形式のデータを返すようにしてください。

その他の参考記事:jquery table 編集

DataTables オプション 一覧： 設定と使い方をわかりやすく解説！

目次