Search code examples
jquerymysqllaravelyajra-datatable

Yajra DataTables : Unable to load records in tables

I am using Yajra data tables package for the loading of records. But I am getting records on full-page not on a particular table. I am not understanding where is the error.

view file

<table id="clientsTable" class="table table-bordered table-striped dataTable">
    <thead>
        <tr>
            <th>#</th>
            <th>First name</th>
            <!--<th>Last name</th>-->
            <th>Mobile number</th>
            <th>Email</th>
            <th>Actions</th>
        </tr>
    </thead>
</table>

script file

$(document).ready(function($) {
    $('#menu-clients').addClass('active');
        $('#clientsTable').DataTable({
            processing: true,
            serverSide: true,
            "bDestroy": true,
            "bAutoWidth": false,
            ajax:{
                url : '/clients',
                method: 'get',
            },
            columns:[
                { data: 'DT_RowIndex'},
                { data: 'first_name', name: 'first_name'},
                { data: 'mobile_no', name: 'mobile_no'},
                { data: 'email', name: 'email'},
                { data: 'actions', name: 'actions'},
            ]
        });
    });

route file

Route::resource('/clients', 'ClientsController');

controller 

public function index()
{
     $data = DB::table('clients')->orderBy('id', 'desc')->get();
     return Datatables::of($data)
     ->addColumn('actions','buttons.clients')
     ->rawColumns(['actions'])
     ->addIndexColumn()
     ->make(true);     
}

response in network tab 

{draw: 0, recordsTotal: 166, recordsFiltered: 166, data: [,…], input: []}
draw: 0
recordsTotal: 166
recordsFiltered: 166
data: [,…]
[0 … 99]
[100 … 165]
input: []

enter image description here

Solution

  • You need to separate the method for your view and dataTable data.

    In your index method call the view of the table.

    public function index()
{
     return view('yourTableBlade');    
}

    Also remove the get() method yajraDataTable does the job for you.

    public function tableData()
{
     $data = DB::table('clients')->orderBy('id', 'desc');
     return Datatables::of($data)
     ->addColumn('actions','buttons.clients')
     ->rawColumns(['actions'])
     ->addIndexColumn()
     ->make(true);      
}

    Create another route for your datatable.

    Route::get('/tableData', 'ClientsController@tableData');