DataTablesを使用してtableにページングやソート機能を付ける

Yuya Sato 640views 更新:2017年5月17日

Bootstrapなどでtable要素をいい感じに作れますが、ページングやソート機能、検索機能などをつけようとすると自分で色々といじっていく必要がありますが、DataTablesを使うとそのような機能を簡単に作ることが出来ます。

使用方法は以下のようにhead内にcssとjsのリンクを追加します。

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/> 
    <script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>
    <script>
        jQuery(function($){
            $("#data-table").DataTable({
                pageLength: 50
            });
        });
    </script>
    <title></title>
</head>

DataTablesでは様々なオプションを指定することが出来ます。上ではpageLengthオプションを使用して1ページに表示する件数をデフォルトで50件に指定しています。

詳しいオプションなどは以下が参考になります。

DataTablesの使い方

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません