[jQuery] DataTablesでソート・フィルタ・ページング機能が簡単に付けられる!

※当サイトでは広告を掲載しています

PHP+MySQLでデータ管理ができるシステムをよく作っているのですが、毎回面倒なのが、一覧表示部分。

DBから読み込んだデータを、ただ表示するだけなら簡単ですが、リストのソート(並べ替え)、フィルタ(絞り込み)、さらには1ページ100件ずつのページングまで入れるとなれば、結構手間だったりします。

でも、jQueryのプラグインを使ってみたら、一瞬でできてしまったので、自分用メモとして書き残し。


jQueryプラグインを設定する

設定と言っても、何も難しいことはありません。まずは以下のサイトへ。


DataTablesのサイト

まず、1番のInclude these two filesに書かれているCSSとJSのファイルを、自サイトのhead内に記述します。

<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

続いて、2番のCall this single functionに書かれているjQueryを、同じく自サイトのhead内に記述します。

$(document).ready(function(){
    $('#myTable').DataTable();
});

あとは、TableタグにmyTableというidをつけてあげれば完成です。もしTableタグに既にidが設定してあれば、上記2番の#myTableを、既につけてあるidに書き換えればOK。

このプラグインは、<tbody>の中だけを処理してくれるので、項目名や処理をしてほしくない行などは、<thead>や<tfoot>の中に記述しましょう。


表示部分の日本語化

ちなみに、このプラグインで追加される機能部分は、全て英語で表示されます。表示部分の一部を日本語化してみましたので、書き換えが面倒な方はどうぞ。

プラグインのバージョンは 1.10.19 です。ZIPで圧縮していますので、解凍してから自分のサーバにアップロードしてお使いください。


2019.1.23追記
自分はわざわざ手動で日本語化しましたが、日本語用のLanguageファイルがあるようです。こちらの方が楽ですね。
2番のjQueryの記述を、以下のように変更すれば日本語化されます。

$(document).ready(function(){
    $.extend($.fn.dataTable.defaults, {
        language: {
            url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
        }
    });
    $('#myTable').DataTable();
});


初稿:2019年1月22日

コメント

タイトルとURLをコピーしました