# Javascript DataTables で excel 風 table 作る

DataTables とは javascript で作られた table 検索、件数制限、ページャー、ソート、フィルター、スクロール、非同期データ連携機能を備えた html table タグの強化ライブラリです。
JQuery 使って古いソースをメンテナンスする仕事があって、テーブルをエクセルのように一部だけ横スクロールしたい要望のために DataTables 使ってみました。

# install

CDN プロバイダーは速くて安定でおすすめ

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css"
/>

<script
  type="text/javascript"
  charset="utf8"
  src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"
></script>

npm パッケージマネージャからインストールして使う

# npm
npm install --save datatables.net-dt

# yarn
yarn add datatables.net-dt
require("datatables.net-dt")();

クライアントパッケージマネージャ bower

bower install --save datatables.net-dt

# デフォルト機能

$("table").DataTable({
  // 件数切替
  lengthChange: true,
  // 検索欄 部分一致検索
  searching: true,
  // テーブルのヘッダに昇順降順ソート
  ordering: true,
  // 左下に「〇〇件中〇から〇まで表示」情報表示
  info: true,
  // 右下にページング機能
  paging: true,
});

# 日本語化に変更

デフォルトの言語設定は英語ですが、日本語に変更することができます。

jQuery(function ($) {
  $.extend($.fn.dataTable.defaults, {
    language: {
      url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json",
    },
  });

  $("table").DataTable();
});

# スクロール機能

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.1/js/dataTables.fixedColumns.min.js"></script>
<link
  type="text/css"
  rel="stylesheet"
  href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"
/>
<link
  type="text/css"
  rel="stylesheet"
  href="https://cdn.datatables.net/fixedcolumns/3.2.1/css/fixedColumns.dataTables.min.css"
/>
$("table").DataTable({
  // 横スクロールバーを有効にする
  scrollX: true,
  // 縦スクロールバーを有効にする (scrollYは200, "200px"など「最大の高さ」を指定します)
  scrollY: 200,
  // 列設定
  columnDefs: [
    // 1列目を消す(visibleをfalseにすると消えます)
    { targets: 0, visible: false },
    // 2列目(0から始まるため1になっています)の幅を100pxにする
    { targets: 1, width: 100 },
  ],
  fixedColumns: {
    leftColumns: 2,
  },
});

参考:DataTables (opens new window)

2022-01-19
  • javascript
レンタルサーバー エックスサーバー レンタルサーバー エックスサーバー DMM fx DMM fx 開発/運用エンジニア募集プログラム 開発/運用エンジニア募集プログラム 外為ジャパンFX 新規口座開設促進 外為ジャパンFX 新規口座開設促進 eBay公式ショッピングサイト Qoo10 eBay公式ショッピングサイト Qoo10 Amazon.co.jpのカテゴリごとのページ

関連記事

Jsconfig と Tsconfig
Cookie localStorage sessionStorage の違い
Javascript var let const 変数宣言の違い
Javascript 電話番号フォーマット
vuejs back to top button component 作成
Nuxtjs 動的なルーティング静的ページ自動生成
Sweet Alert swal に複数 content
javascript 開発で出会った TypeError
ReferenceError: location is not defined
vuejs で omisejapan の決済フォーム作成した時のメモ
国際化 i18n と地域化 L10N
大きいファイルをスライス分割してアップロード
javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い
javascript 配列 重複排除
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
キーコード取得 & キーコード一覧
moment.js 使って日本語曜日対応
開発時によく使うゼロ埋めパディング作業まとめ
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
javascript reduce 連想配列の合計計算覚えよう
nuxtjs と codeigniter で jwt システム構築
nodejs 使う時のエラーたち
javascript で作る html から PDF 変換 pdfmake の日本語対応
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
正規表現一覧 よく使う検索・置換のパターン
javascript password generator ランダム文字列パスワード作成
javascript 日本語 shift-js 対応 CSV ダウンロード
php 開発におけるコーディングルール・規約