ソートできるデータテーブル dataTables

Bloggerでこの手を説明するのが難しくてデモページの必要性を感じますがご了承ください。

表組み<table>のモバイル対応は苦労します。
できるだけ<table>を避けたデザインにしたいくらいです。

データの中身に左右される。

文字が多いのか
データなのか
見栄えなのか
結合している

結果としてOverflowになりがち

そこで、解決するためのdataTables使ってみました。

dataTablesは管理画面・ダッシュボードなどでフィルタを利用したいデータリストなどで、実装に必要なあれこれを考えたりしなくていい手軽さが好みなのですが、モバイルでの実装は難しいと感じていました。
久しぶりにサイトを見てみると大きなき変化は無さそうですが、デザイン面では大幅に改善されているようです。

DataTables | Table plug-in for jQuery
https://datatables.net/

スタイルやパッケージを選んでダウンロードできますが、まずはExamplesを見てどのスタイルやパッケージが必要か見定めると良いと思います。

サイトのトップにあるのがResponsive対応しているようで需要がありそうです。

Extensions > Responsive

サイト上のどこにあるのかわかりにくいですが Extensions > Responsiveになります。

DataTables examples - Responsive
https://datatables.net/extensions/responsive/examples/

DataTables example - Class name
https://datatables.net/extensions/responsive/examples/initialisation/className.html

DataTables example - Column priority
https://datatables.net/extensions/responsive/examples/column-control/columnPriority.html

DataTables example - With Buttons - Column visibility
https://datatables.net/extensions/responsive/examples/column-control/column-visibility.html

DataTables example - Class control
https://datatables.net/extensions/responsive/examples/column-control/classes.html

ざっくりと説明します。

基本はセルの右側データから非表示になります。
データ内の文字量次第ではCSSでセルごとにnowrap設定するのが良さそうです。

Javascriptは３点

jQuery-3.3.1
jquery.dataTables
dataTables.responsive

CSSは2点

jquery.dataTables
dataTables.responsive

表示優先度の設定が変更できます。
個人的には<th data-priority="1">で指定するほうが管理しやすい気がしますが、設定部分をまとめるほうが都合がいいこともあるでしょう。
ボタンによって表示・非表示をコントロールできます。
画面サイズで表示コントロールします。

表示設定項目

標準では検索フィルタや情報が表示されますが、必要ない場合は非表示にできます。

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

      "bFilter": false //フィルタ検索BOX
      "bPaginate": false, //ページ送り
      "bInfo": false, //データ数
      "bSort": false, //ソート
      "lengthMenu": [25, 50, 75, 100],

      "oLanguage": {
        "sLengthMenu": "表示件数: _MENU_ 件",
        "sSearch": "キーワードフィルタ:",
        "sEmptyTable": "対象がありませんでした。",
        "sLoadingRecords": "Loading...",
        "sInfo": "表示件数 _START_ to _END_ / _TOTAL_ 件",
        "sZeroRecords": "対象がありませんでした。",
        "sInfoEmpty": "Showing 0 to 0 of 0 entries",
        "sInfoFiltered": " - 全_MAX_件",
        "oPaginate": {
          "sFirst": "First",
          "sPrevious": "前のページ",
          "sNext": "次のページ",
          "sLast": "Last"
        }
      },
    });
  });

最後にEditorは機会がある時に試してみたいですが
SQLも書き出してくれるようなので、設計から使えるということですね。
デザインありきで設計できると考えればいいのかも。

Editor | Editing for DataTables
https://editor.datatables.net/

Dela RedForce

このブログを検索