今回は、最初に一覧データをすべてのを読み込み、jQueryのプラグインでクライアント側で検索やページャー、ソート機能を付ける「DataTables」と「Tablesorter」をご紹介します。
一旦テーブルを作って、そのテーブルをJavaScriptで制御するといった感じになります。
Ajaxを利用した非同期通信もありますが、通信するとどうしても遅くなります。
1. DataTables
1つ目は[DataTables]というjQueryプラグインです。
デザインに関してもBootstrapとも相性がよく、使いやすい印象です。
DataTablesの使い方
いつもの如くCDN使います。
読み込むプラグインは多くて若干重たい印象ですが、機能がオール・イン・ワンなので、使いたい機能を有効にしてくだけで使い方は簡単です。
こちらの参考サイトがわかりやすいです。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9RGF0YVRhYmxlcyVFMyU4MSVBRSVFNCVCRCVCRiVFMyU4MSU4NCVFNiU5NiVCOSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZTJlN2E4MWM5MzRkNzAzZTVjNWNhNDVhYjg3ZjAyMzA&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBuaXNzdWsmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTU3OWJkYjUzZDNiNTVkZmU4ZWU2MDQ4NzA1ODRmY2Yz&blend-x=142&blend-y=486&blend-mode=normal&s=1db6de8231141a9c073d60e024591f3e)
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> |
詳しくは本家サイトを御覧ください。以上、一度お試しあれ。
コメント