今回は、最初に一覧データをすべてのを読み込み、jQueryのプラグインでクライアント側で検索やページャー、ソート機能を付ける「DataTables」と「Tablesorter」をご紹介します。
一旦テーブルを作って、そのテーブルをJavaScriptで制御するといった感じになります。
Ajaxを利用した非同期通信もありますが、通信するとどうしても遅くなります。
1. DataTables
1つ目は[DataTables]というjQueryプラグインです。
デザインに関してもBootstrapとも相性がよく、使いやすい印象です。
DataTablesの使い方
いつもの如くCDN使います。
読み込むプラグインは多くて若干重たい印象ですが、機能がオール・イン・ワンなので、使いたい機能を有効にしてくだけで使い方は簡単です。
こちらの参考サイトがわかりやすいです。
Bootstrapを用いた基本的な使い方はこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/dataTables.bootstrap.min.css"> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/dataTables.bootstrap.min.js"></script> <script> $(function () { $('#datatables').DataTable({ "language": { "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Japanese.json" }, 'pageLength' : 50, 'paging' : true, "order": [[ 1, 'desc' ]], }); }); </script> |
languageで日本語化しています。
DataTables用のBootstrapのCSSも用意されているし、テーマ別のファイルも用意されていますので、お好きなように。
その他のオプションについては参考サイトを御覧ください。
2. Tablesorter
2つ目は[Tablesorter]というjQueryプラグインです。
こちらもテーマがたくさんあります。
私の印象では[DataTables]より面倒で、ページャーや検索をする場合には、オプション用のモジュールを追加で読み込む必要があるようです。
Tablesorterの基本的な使い方
基本的な使い方はDataTablesとあまり大差はありません。
|
1 2 3 4 5 6 7 8 9 10 11 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.4/js/jquery.tablesorter.min.js"></script> <script> $(function() { $('#tablesorter').tablesorter({ headers: { 1: {sorter:false} } }); }); </script> |
これにページャーを付けたい場合はpagerを、検索機能を付けたい場合は、combinedを追加する必要があります。
必要なモジュールだけ追加すればいいので、ある意味スッキリすると思います。
|
1 2 |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.4/js/extras/jquery.tablesorter.pager.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.4/js/jquery.tablesorter.combined.min.js"></script> |
詳しくは本家サイトを御覧ください。以上、一度お試しあれ。
コメント