# 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,
},
});