DataTablesを使用したテーブル生成とサーバーサイド連携 (1)

今回はDataTablesを使用したテーブル生成方法とサーバーサイド連携方法をシェアしたいと思います。
サーバーサイドはLaravel/PHPを使用する想定です。

DataTablesとは

DataTablesとはjQuery/Javascriptのテーブル生成用ライブラリです。
実際の動作の操作感は以下の公式サイトで確認できます。

https://datatables.net/

DataTablesで一般的なテーブル生成条件の必要な機能をほぼカバーできます。
例として以下の機能が標準状態で搭載されています。

・各ページ単位の表示件数の切り替え
・検索(フィルター)機能
・各表示項目のソート(並び替え)機能
・合計件数の表示とページ単位の表示件数
・ページング機能

DataTablesを使用するための準備

今回はデザインテンプレートとしてAdminLTEを使用します。

AdminLTEにはテーブル部分にDataTablesが組み込まれたレイアウトサンプルがありますので
これを初期テンプレートとして使用したいと思います。

AdminLTE/DataTables デザインサンプル
https://adminlte.io/themes/v3/pages/tables/data.html

DataTablesを使用するために、table idの設定とJavascriptでのロード時の初期化処理が必要です。
AdminLTE/DataTables デザインサンプルではtable idは以下のように”example1″と仮設定されていたので、ここをわかりやすいtable idに設定変更します。今回の例ではtable idは”dttb”と設定しました。

<table id="example1" class="table table-bordered table-striped">

Javascriptでのロード時の初期化処理のほうも設定したtable idに変更します。

$(function () {
    $("#dttb").DataTable({
        "responsive": true, 
        "lengthChange": false, 
        "autoWidth": false,
    });
});


次回はDataTablesのサーバーサイド連携方法について説明します。


木曜日担当:nishida



アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833(平日 10:00~17:00)

お問い合わせフォーム