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

本記事ではDataTablesを使用したテーブル生成方法とサーバーサイド連携方法をシェアします。
前回の記事でページング処理ができましたので、今回はデータテーブルの各項目にソート処理を追加していきたいと思います。

ソート処理の追加

DataTablesでは各項目名の横に矢印マークがついており、これをクリックすることで
各項目の昇順、降順に並び替えをおこなうためのデータを
DataTablesがサーバーサイドにpostしてくれます。
これらのデータは以下のように取得することができます。

//何番目の項目をソートするか
$order_column_num = $request->order[0][‘column’];

//昇順(asc)または降順(desc)のどちらで並び替えをおこなうか
$order_dir = $request->order[0][‘dir’];

これらのデータをLaravelで受け取り、orderByに設定することでソート処理をおこなうことが可能です。
実例は以下のようになります。

function user_datatables(Request $request) {

    $rec_data = [];
    $query = Member::query();
    $total_cnt = $query->count();
    $length = $request->length;
    $start = $request->start;

    //ソート処理 start
    $order_column = [
                        'id', 
                        'sei', 
                        'sei_kana', 
                        'mail', 
                        'created_at', 
                    ];

    //何番目の項目をソートするか
    $order_column_num = $request->order[0]['column'];

    //昇順(asc)または降順(desc)のどちらで並び替えをおこなうか
    $order_dir = $request->order[0]['dir'];

    $query->orderBy($order_column[$order_column_num], $order_dir);
    //ソート処理 end

    $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);
}

以上でソート処理の設定が完了しましたので動作確認をおこないます。

■IDの昇順(asc)でソート

■IDの降順(desc)でソート

■フリガナの昇順(asc)でソート

■フリガナの降順(desc)でソート

■メールの昇順(asc)でソート

■メールの降順(desc)でソート

以上正しく動作することが確認できました。

次回は検索機能の追加をおこないたいと思います。

木曜日担当：nishida