# 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のカテゴリごとのページ

関連記事

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