DataTablesを使用したテーブル生成とサーバーサイド連携 (1)
- 2022年2月03日
- 技術情報
今回はDataTablesを使用したテーブル生成方法とサーバーサイド連携方法をシェアしたいと思います。
サーバーサイドはLaravel/PHPを使用する想定です。
DataTablesとは
DataTablesとはjQuery/Javascriptのテーブル生成用ライブラリです。
実際の動作の操作感は以下の公式サイトで確認できます。
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
nishida at 2022年02月03日 10:00:00