今回は、最初に一覧データをすべてのを読み込み、jQueryのプラグインでクライアント側で検索やページャー、ソート機能を付ける「DataTables」と「Tablesorter」をご紹介します。
一旦テーブルを作って、そのテーブルをJavaScriptで制御するといった感じになります。
Ajaxを利用した非同期通信もありますが、通信するとどうしても遅くなります。
1. DataTables
1つ目は[DataTables]というjQueryプラグインです。
デザインに関してもBootstrapとも相性がよく、使いやすい印象です。
DataTablesの使い方
いつもの如くCDN使います。
読み込むプラグインは多くて若干重たい印象ですが、機能がオール・イン・ワンなので、使いたい機能を有効にしてくだけで使い方は簡単です。
こちらの参考サイトがわかりやすいです。
Bootstrapを用いた基本的な使い方はこんな感じです。
<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とあまり大差はありません。
<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を追加する必要があります。
必要なモジュールだけ追加すればいいので、ある意味スッキリすると思います。
<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>詳しくは本家サイトを御覧ください。以上、一度お試しあれ。
- Original:https://minory.org/jquery-datatables-tablesorter.html
- Source:Minory
- Author:管理者