2週間前に投稿

DataTables.js の Options 設定

2020年1月12日

この記事は約 9 分で読めます。

4.5

DataTables はHTML のテーブルに、
ページ切り替え、ページ当たりの件数設定、
ソート、キーワード検索などの機能を
簡単に追加できるライブラリです。

DataTables は
free open source software であり、
MIT license で利用できます。
download して自由に使用できます。

注:DataTables.js は jQuery プラグインであるため、
jQuery をプロジェクトに追加する必要があります。

supporter packages
のいずれかを購入することで、
DataTablesの継続的な開発に
貢献する事もできます。

この DataTables の
簡単なオプション設定についての
備忘録です。

先ずは以下が
デフォルトの状態 ※です。

※ 日本語表示に替えてあります

Date RBC level (10⁶/㎕) Hgb level (g/dL)
Day 1 5.1 7.8
Day 2 4.9 7.4
Day 3 4.76 7.2
Day 4 4.49 6.7
Day 5 4.51 6.7
Day 6 3.82 5.4
Day 7 3.50 5.1

このデフォルトの状態を

を参考にカスタマイズします。

先ずは結果を以下に。
外観がだいぶ変わりましたね。

Date RBC level (10⁶/㎕) Hgb level (g/dL)
Day 1 5.1 7.8
Day 2 4.9 7.4
Day 3 4.76 7.2
Day 4 4.49 6.7
Day 5 4.51 6.7
Day 6 3.82 5.4
Day 7 3.50 5.1

Internationalisation

DataTablesを日本語にする場合は
言語ファイルを読み込ませる
language.url Option か、
language Option プロパティを使用します。

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

Language options を使って
こんな事も出来ます。

検索(search)を韓国語、
情報表示(info)を中国語に。

Date RBC level (10⁶/㎕) Hgb level (g/dL)
Day 1 5.1 7.8
Day 2 4.9 7.4
Day 3 4.76 7.2
Day 4 4.49 6.7
Day 5 4.51 6.7
Day 6 3.82 5.4
Day 7 3.50 5.1
$('#myTable4').dataTable({
  language: {
    sInfo: "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
    sSearch: "검색:"
  }
});

このような極端な事をする方は
いないと思いますが、
参考までに。

Responsive

DataTables の
Responsive 拡張機能を有効にするには
以下のように DataTables オプション
追加します。

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

HTML table に class を追加して
Responsive を有効にする事も出来ます。

<table class="display responsive nowrap" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
        </tr>
    </thead>
    ...
</table>

※ 詳細は Initialisation を参照してください。

ここで
注意しなければいけないのは、
DefaultのJavascriptファイルと
CSSファイルでは動作しない事です。

module を含めるか、
DataTables download builder
カスタム DataTables パッケージに
差し替えます。

カスタムパッケージは、
以下の手順で選択していきます。

Step 1.
スタイリングフレームワークを選択する。

Choose a styling framework

Step 2.
パッケージを選択する。

Select packages

拡張機能
Responsive にチェック。

Extensions

Step 3.
ダウンロード方法を選択する。

※ それぞれのタブから
ダウンロード方法を選択してください。

Pick a download method

※ Bootstrap などの
framework を選択した場合や、
違う拡張機能を選択した場合の
DataTables の表示は未確認です。

Responsive では、
Details views
Modal details display などの
様々な examples が用意されています。

Responsive を有効にする際の注意事項が
以下に書かれています。

Styling options

HTML table には class を追加します。

<table id="myTable3" class="display cell-border">
    <thead>
        ...
    </thead>
    <tbody>
        ...
    </tbody>
</table>

デフォルトのDataTables stylesheetには、
DataTableのさまざまなスタイリング機能を
制御するために使用できるclass nameがあります。

  • display –  stripehoverrow-border and order-column class の省略形。
  • compact – DataTableのデフォルトのスタイリングが使用する空白の量を減らし、
    画面上の情報密度を増やします。(1.10.1以降)
  • cell-border – 各セルの4つの側面すべての周りの境界線
  • nowrap – テーブル内のコンテンツの折り返しを無効にして、
    セル内のすべてのテキストが1行になるようにします。(1.10.1以降)

※ その他のオプションはDefault styling optionsを参照の事。

Setting options

DataTablesでは
デフォルトで件数切替、検索、
ソート機能、情報表示、
ページング機能が追加されます。

Setting options で、
これらの機能を無効にします。

DataTables の各機能
  1. lengthChange – 件数切替
  2. searching – 検索
  3. ordering – ソート機能
  4. info – 情報表示
  5. paging – ページング機能

※ その他のオプションはOptionsを参照の事。

Result

$(function() {
    $('#myTable3').DataTable({
        responsive: true,
        lengthChange: false,
        searching: false,
        paging: false,
        language: {
            url: "//cdn.datatables.net/plug-ins/1.10.20/i18n/Japanese.json"
        }
    });
});

この記事に表示されている
DataTables のソースコードは
GitHub のこちらです。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
DataTables.js の Options 設定