Datatable with laravel

In this article we are not going to learn how to set up laravel and MySQL etc.. we directly start with how to integrate datatable with server-side rendering.

For below code data table dependencies:

jQuery
datatable
button ( datatable plugin)
Bootstrap4 (styling framework)

index.html

<table>
    <thead>
        <tr>
            <th></th>
            <th>id</th>
            <th>Image</th>
            <th>Name</th>
            <th>Playlist Id</th>
            <th></th>
        </tr>
    </thead>
</table>

script.js

var sDataTable = $("#h-list").DataTable({
    dom:
        "<'row'<'col-sm-7 text-left'B><'col-sm-2'l><'col-sm-3'f>>" +
        "<'row'<'col-sm-12'tr>>" +
        "<'row'<'col-sm-5'i><'col-sm-7'p>>",
    buttons: [
        {
            text: "Add Section",
            action: function (e, dt, node, config) {
                $("#add-section").modal("show");
            },
        },
    ],
    processing: true,
    serverSide: true,
    responsive: true,
    ajax: {
        url: "/list",
        type: "get",
        error: function () {
            $(".grid-error").html("");
            $("#grid").append(
                '<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</ath></tr></tbody>'
            );
            $("#grid_processing").css("display", "none");
        },
    },
    reatedRow: function (row, data, dataIndex) {
        // Set the data-status attribute, and add a class
        $(row).addClass("s-row" + data[4]);
    },
});

In Laravel controller file:

public function list(Request $request){
    $search = $request->query('search');
    $order = $request->query('order');
    $start = $request->query('start');
    $length = $request->query('length');
    $draw = $request->query('draw');
    $columns = array( 
        0 =>'id', 
        1 =>'id', 
        2 =>'image',
        3 => 'name',
        4 => 'video_id',
        5 => 'upload_date',
    );
    $playlist_id = intval($request->query('playlist_id'));
    $nRows = Video::where('playlist_id', $playlist_id)->count(); 
    $totalData = $nRows;
    $totalFiltered = $totalData;
    
    $data = array();
    
    if(empty($search['value']) || $search['value'] == null){
        $videos = Video::where('playlist_id', $playlist_id)->offset($start)->limit($length)->orderBy($columns[$order[0]['column']], $order[0]['dir'])->get();
    } else {
        $videos = Video::where('playlist_id', $playlist_id)->where('name', 'LIKE', "%{$search['value']}%")->offset($start)->limit($length)->orderBy($columns[$order[0]['column']], $order[0]['dir'])->get();
        $totalFiltered = count($videos);
    }
    
    foreach ($videos as $video) {
        $nestedData = array(); 
        $nestedData[] = '<input type="checkbox" class="jb-checkbox ssc-'.$video->id.'">';
        $nestedData[] = $video->id;
        $nestedData[] = '<a href="'.$video->img_url.'" target="_blank"><img src="'.$video->img_url.'"  width="60"></a>';
        $nestedData[] = '<a target="_blank" href="https://www.youtube.com/watch?v='.$video->video_id.'">'.$video->name.'</a>';
        $nestedData[] = $video->video_id;
        $nestedData[] = '<button type="button" class="btn btn-primary btn-badge v-edit" data-id="'.$video->id.'" >Edit</button><button type="button" class="btn btn-danger btn-badge v-delete v-'.$video->id.'" data-id="'.$video->id.'">Delete</button>';
        $nestedData[]= $video->id;
    
        $data[] = $nestedData;
    
    } 
    
    $json_data = array(
                "draw"            => intval( $draw ),   
                "recordsTotal"    => intval( $totalData ),  
                "recordsFiltered" => intval( $totalFiltered ), 
                "data"            => $data  
                );
    return response()->json($json_data);
}