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 id="h-list" class="table table-striped table-bordered" style="width:100%"   >
    <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</th></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);
}

 

Leave a Reply

Please Login to comment
  Subscribe  
Notify of

Sign Up for Our Newsletters

Get notified of the best deals on our WordPress themes.