お手軽に機能付きテーブルを作るJavaScriptライブラリDataTables

著者:杉浦

お手軽に機能付きテーブルを作るJavaScriptライブラリDataTables

DataTables | Table plug-in for jQuery
 DataTablesはJavaScriptのみでテーブルにページネーション、検索、並び替えを付与するライブラリです。
bootstrap4のスタイルをベースにdatatablesを爆速で利用してみた(CDN利用) – Qiita
に載っているコードをJSFiddleで動かしてみたのが次です。

 きれいなインデントのHTMLコード64行だけで構成されています。要は簡単ということです。tableタグと中身を用意してidをつけて次のコードで適用してもうおおよそ完成です。

$(document).ready( function () {
    $('#myTable').DataTable();
} );

 注意点として大量のデータを扱うのには向いていない点があります。基本ブラウザで閉じて扱うことを前提としており、対象のデータ全体をJavaScriptだけで扱おうとしています。このため大量のデータ(1万件でもう辛い)を扱おうとした場合、テーブルのデータをブラウザに渡すための最初のデータ読み込みでとても時間がかかります。ajaxを用いて外部サーバと連携することで逐次読み込みも可能なのですが、そちらはフォーマットの調整が面倒な上、サーバ上で渡すデータを加工すればDataTablesを用いるまでもありません。
 欠点をあげましたが少なめのデータで機能付きのテーブルを作る際にはとてもいいものです。

  • この記事いいね! (0)

著者について

杉浦 administrator