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を用いるまでもありません。
欠点をあげましたが少なめのデータで機能付きのテーブルを作る際にはとてもいいものです。
