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

本記事ではDataTablesを使用したテーブル生成方法とサーバーサイド連携方法をシェアします。
今回は前回の記事で説明をおこなったサーバーサイドでのページング処理実装の続きをおこなっていきたいと思います。

ページング処理のサーバーサイドスクリプト

前回説明をおこなった設定を反映したサーバーサイドのスクリプトは以下のようになります。

function user_datatables(Request $request) {

    $rec_data = [];
    $query = Member::query();

    //全件件数の取得
    $total_cnt = $query->count();

    //1ページあたりの表示件数
    $length = $request->length;
    //何件目から表示するか
    $start = $request->start;

    $query->offset($start);
    $query->limit($length);
    $member_list = $query->get();
    foreach($member_list as $member){
        $row_data = [
            'item1' => $member->id,
            'item2' => $member->sei.$member->mei,
            'item3' => $member->sei_kana.$member->mei_kana,
            'item4' => $member->mail,
            'item5' => $member->created_at->format('Y-m-d H:i'),
        ];
        $rec_data[] = $row_data;
    }

    $draw = $request->draw;
    $res_json = array(
        'draw' => $draw, 
        'recordsTotal' => $total_cnt, 
        'recordsFiltered' => $total_cnt, 
        'data' => $rec_data, 
    );

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

※上記のサンプルコードではDBから取得した値をそのまま表示させていますが、実際にリリースする場合は、エスケープ処理などのセキュリティ対策も必須になります。

AdminLTEのデザインサンプルではページあたりに表示する件数選択のプルダウンが
初期状態では非表示の設定になっているので、こちらを表示するように設定を変更(lengthChangeをfalseからtrueに変更)します。

  $(function () {
    $("#dttb").DataTable({
        "lengthChange": true, 
        "lengthMenu": [ 2, 5, 10, 20, 50 ],
        "autoWidth": false,
        "processing": true,
        "serverSide": true,
        "ajax": {
              "url": "{{url('/')}}/user_datatables",
              "type": "post",
              "complete": function(res) {
                //   console.log(res.responseJSON);
              }
          },
          "columns": [
              { "data": "item1" },
              { "data": "item2" },
              { "data": "item3" },
              { "data": "item4" },
              { "data": "item5" },
          ]
    });
  });

またページあたりに表示する件数選択のプルダウンの内容を編集することも可能です。
上記の例ではページあたり[ 2, 5, 10, 20, 50 ]件表示する選択肢を設定しています。

これでページングの処理はひととおり完成ですので動作確認をおこないます。

ページあたりの表示件数を5件に設定して1ページ目を表示

ページあたりの表示件数を5件に設定して2ページ目を表示

ページあたりの表示件数を2件に設定して1ページ目を表示

ページあたりの表示件数を2件に設定して2ページ目を表示

ページあたりの表示件数を2件に設定して5ページ目を表示

以上、問題なく動作することが確認できました。

次回はソート処理の追加をおこないたいと思います。

木曜日担当：nishida