Yajra Datatables Laravel

Question

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', 'PointsController@getPoints')->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

Answer 1

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