Ad

Yajra Datatables Laravel

- 1 answer

I am having issues using Yajra Datatables in my Laravel App.

I have followed a online guide however I get a blank response. I need to display a list of members based on their points.

This is the Table in the View Page:


                    <div class="table-responsive">
                        <table class="table table-striped table-no-boreded table-hover" id="points-table">
                            <thead class = "text-primary">
                            <h4> </h4>
                                <tr>
                                    <th class="text-center">Postion</th>
                                    <th class="text-center">Member</th>
                                    <th class="text-center">Total Points</th>
                                    <th width="10%"></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>



This the Script on the same view page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>

<script type = "text/javascript">
    $(function() {

        var table=$('.points').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{{ route('getPoints') }}',
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex' },
                { data: 'member_id', name: 'member' },
                { data: 'total_points', name: 'Total Points' },
                { data: 'action', name: 'action', orderable: true, searchable: true },
            ]
        });
    })

</script>

This is the Controller

  public function getPoints(Request $request)
    {
        $year =  Carbon::parse(Carbon::now())->year;

        if ($request->ajax()) {

            $points = Points::query()
            ->select('member_id')->selectRaw('SUM(value) as TotalPoints')
            ->where('Year','=', $year)
            ->groupBy('member_id')
            ->orderByDesc('Totalpoints')
            ->get();

            return Datatables::of($points)
            ->addIndexColumn();
        }
    }

I have added the get in the Routes

Route::get('get/points', '[email protected]')->middleware('auth')->name('getPoints');

I know my query works, as when I had a normal data this query worked fine. Yet under the code listed above, I don't get a reponse.

I have 1 record in my points table, therefore I should see something under the datatable.

Any help to point me in the right direction would be fantastic

Ad

Answer

You are passing wrong class in your javascript code.

Instead of $('.points') class you need to put $('#points-table')

var table=$('#points-table').DataTable({
  // your code
})

Put code in your controller like

return DataTables::of($points)
->addIndexColumn()
->make(true);
Ad
source: stackoverflow.com
Ad