freshbitsweb/laratables： Ajax support of DataTables (Laravel 5.5 – Laravel 5.8) Demo @
JavaScriptにはDataTables.jsというリッチな表を簡単に作成するライブラリがあります。
DataTables ｜ Table plug-in for jQuery
お手軽に機能付きテーブルを作るJavaScriptライブラリDataTables – 株式会社シーポイントラボ ｜ 浜松のシステム開発会社
DataTables.jsの基本的な使い方は、あらかじめHTMLコード上にtableタグで値を埋め込んで置き、DataTables.jsを適用して並び替え機能、絞り込み機能、ページネーション機能をつける、です。これは本当に1時間もかからずにリッチな表を作れる様なシンプルないい造りのライブラリなのですが問題がありました。それはあらかじめHTMLに埋め込む以上、初期読み込みにとても時間がかかりやすい点です。常に総数の実体をブラウザの初期段階で取得する必要があるため、総数が万件ある様なデータを対象にすると長い読み込み時間や崩れたデザインが現れだします。
この問題を解決するには、ajaxを用いて適宜必要なデータのみを取得する基本的でない使い方をするのが良い方法です。しかしこの場合、サーバ側でDataTables.jsの提供するインタフェースに合わせたデータ処理のロジックを作る必要がでてきます。せっかく楽できるライブラリであったのに残念なことです。laratablesはこのDataTables.js用のロジックをLaravel内で簡単に記述するためのパッケージです。
使い方は簡単。composerでプロジェクトに追加して、
composer require freshbitsweb/laratables
Bladeに次の様にHTMLにテーブルのヘッダ、DataTablesにajaxの宛先と取得データのプロパティ名を記述、
<table id="simple-datatable-example" class="display" style="width:100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Mobile</th>
<th>Email</th>
<th>Gender</th>
<th>Country</th>
</tr>
</thead>
</table>
@push('scripts')
<script>
$(document).ready(function() {
$('#simple-datatable-example').DataTable({
serverSide: true,
processing: true,
responsive: true,
ajax: "{{ route('simple_datatables_users_data') }}",
columns: [
{ name: 'first_name' },
{ name: 'last_name' },
{ name: 'mobile' },
{ name: 'email' },
{ name: 'gender' },
{ name: 'country' }
],
});
});
</script>
@endpush
ajax宛先のコントローラに次の様にLaratables::recordsOf();を検索対象のモデルクラスを呼ぶだけです。
/**
* return data of the simple datatables.
*
* @return Json
*/
public function getSimpleDatatablesData()
{
return Laratables::recordsOf(User::class);
}
これだけで次のデモページの一部、Simpleのテーブルの完成です。
Laratables
デモページにある様に、データに無関係なカラム、データの格納されたテーブルに関連したテーブルのデータも使えます。全てを把握できていませんがgithubの説明の文量からしてDataTablesそのものより多機能そうです。
freshbitsweb/laratables： Ajax support of DataTables (Laravel 5.5 – Laravel 5.8) Demo @
