シン・TWSNMP開発日誌：テーブル表示をDataTablesに変更するための練習

今朝は４時から開発開始です。
いろいろな画面のテーブルの表示をGrid.js

Grid.js - Advanced JavaScript table plugin

からDataTables

DataTables | Javascript table library

へ変更するために、技を練習しました。
Grid.jsで作った操作方法を、そのまま移植するのは止めてDataTablesで簡単にできる方法に変更しました。
考え方を整理すると

• テーブルの中にボタンを表示するのはやめる

• 標準の行を選択機能を使う

• 選択された数に応じて操作ボタンを表示する

という感じです。テーブルの表示にボタンが並ぶのはスペースの無駄に
なるのでスッキリしました。選択もタッチパネルで操作しやすいように、行を１回タップで選択、２回目で選択解除する方式です。チェックボックスのスペースも必要ないです。
選択された数を取得する処理は

   table = new DataTable("#table", {
      columns: columns,
      data: data,
      language: lang,
      select: {
        style: "multi",
      },
    });
    table.on("select", () => {
      selectedCount = table.rows({ selected: true }).count();
    });
    table.on("deselect", () => {
      selectedCount = table.rows({ selected: true }).count();
    });
 

のようなシンプルなものになりました。
テーブルの表示の言語は、設定のlangで設定しますが配布されている日本語のファイルをそのまま使うと選択の部分が翻訳されていません。そこで

import ja from "datatables.net-plugins/i18n/ja.mjs";

export const getTableLang = () => {
  ja.select = {
    cells: {
      "0": "",
      "1": "1 セル選択",
      _: "%d セル選択",
    },
    columns: {
      "0": "",
      "1": "1 カラム選択",
      _: "%d カラム選択",
    },
    rows: {
      "0": "",
      "1": " 1 行選択",
      _: " %d 行選択",
    },
  };
  return ja;
}

のように、追加して使えるようにしました。

気になる見た目の問題をCSSを修正して対応しました。

• １ページの表示数

• 検索の入力エリア

• ダークモードの文字色

• 選択した時のアイコンの表示

などです。
いろいろ、練習した結果

動画は

です。
DataTablesの使い方もかなり思い出したので、他の画面も対応しようと思います。

明日に続く