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

今回はDataTablesを使用したテーブル生成方法とサーバーサイド連携方法をシェアしたいと思います。
本記事は「DataTablesを使用したテーブル生成とサーバーサイド連携(1)」の続きです。

DataTablesのサーバーサイド連携(フロントエンド)

DataTablesをサーバーサイドと連携させるためにJavascriptでのロード時の初期化処理を以下のように書き換えます。

$(function () {
    $("#dttb").DataTable({
      "responsive": true, 
      "lengthChange": false, 
      "autoWidth": false,
      "processing": true,
      "serverSide": true,
      "ajax": {
            "url": "{{url('/')}}/user_datatables",
            "type": "POST"
        },
        "columns": [
            { "data": "item1" },
            { "data": "item2" },
            { "data": "item3" },
            { "data": "item4" },
            { "data": "item5" },
        ]
    });
  });

上記に追加した項目について以下に説明します。

processing：サーバーサイドからの応答を待っている間「処理中です」と表示をおこなうための設定です。
serverSide：サーバーサイド連携をおこなう設定です。
ajax：サーバーサイド連携をおこなうURLとgetまたはpostを設定します。
columns：サーバーサイドから返却されるjsonとテーブルに表示する項目名を設定します。

DataTablesのサーバーサイド連携(バックエンド)

次はサーバーサイド側の設定です。
サーバーサイドプログラムはLaravel/PHPを使用しています。

まずは \routes\web.php に上記の処理用ルートを設定します。
DataTablesのajaxでの設定(urlおよびtype)にあわせます。

Route::post('/user_datatables', [UserController::class, 'user_datatables']);

次に上記の処理用コントローラーの作成をおこないます。
\app\Http\Controllers\UserController.php

まずは動作確認用としてサーバーサイド連携で返却するjsonの生成をおこないます。
jsonのフォーマットサンプルは以下のDataTables公式サイトに記載がありました。

https://datatables.net/examples/data_sources/server_side

上記URLの「Ajax」タブを開くことでサーバーサイドから返却するjsonのフォーマットサンプルが確認できます。
このフォーマットのjsonを返却するようにLaravelで簡単な動作確認用スクリプトを記載しました。

function user_datatables(Request $request) {

    $rec_data = [];
    $row_data = [
                    'item1' => "a",
                    'item2' => "b",
                    'item3' => "c",
                    'item4' => "d",
                    'item5' => "e",
                ];

    for ($i = 1; $i <= 10; $i++) {
        $rec_data[] = $row_data;
    }

    $res_json = array(
        'draw' => '1', 
        'recordsTotal' => '57', 
        'recordsFiltered' => '57', 
        'data' => $rec_data, 
    );

    return response()->json($res_json);
}

次回は上記スクリプトの動作確認の結果と問題が発生した場合の対処方法についてご紹介します。

木曜日担当：nishida