テーブルで並び替え・検索するなら「DataTables」か「Tablesorter」の2強！

今回は、最初に一覧データをすべてのを読み込み、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:管理者

Amazonベストセラー