Laravel datatable not showing

Question

I'm using yajra laravel datatable package with laravel 5.8. Datatable is not showing in my view. I added datatable after jquery. I can not figure out where is the problem. Help me to solve this. Thanks.

datatable script:

$(document).ready( function () {
	$('#appointment-datatable').DataTable({
		processing: true,
		serverSide: true,
		ajax: '/get_appointment_data',
		columns: 
		[
			{
				data: 'id', 
				name: 'id'
			},
			{
				data: 'date', 
				name: 'date'
			},
			{
				data: 'time', 
				name: 'time'
			},
			{
				data: 'payment_status', 
				name: 'payment_status'
			}
		]
	})
} );

Controller code:

    public function getAppointmentData(Request $request)
    {
        if ($request->ajax())
        {
            $getData = DB::table('jobs')->select('id', 'date', 'time', 'payment_status', 'amount')->get();
            $datatable = DataTables::of($json)->make(true);
            return $datatable;
        } 
    }
    public function ShowAppointments(Request $request)
    {
        return view('admin.show_appointments');
    }

Routes:

Route::get('/show_appointments', 'NavigationController@ShowAppointments')->name('show_appointments');
Route::get('/get_appointment_data', 'NavigationController@getAppointmentData');

I want to show the datatable in admin.show_appointments view return in ShowAppointments method

HTML in view:

        <table class="table" id="appointment-datatable">
            <thead>
              <tr>
                <th scope="col">id</th>
                <th scope="col">date</th>
                <th scope="col">time</th>
                <th scope="col">payment_status</th>
                <th scope="col">amount</th>
              </tr>
            </thead>
       </table>

I never used datatables before and i'm new to laravel. Appreciate your help!

Answer 1

Make Changes like this:
Hopefully it'll help you

Route File :

Route::get('/appointments','NavigationController@Appointments')->name('appointments');

Html Code:
Put this in your head section

<meta name="csrf-token" content="{{ csrf_token() }}">

And this is your table:

<table class="table" id="appointment-datatable">
    <thead>
      <tr>
        <th scope="col">id</th>
        <th scope="col">date</th>
        <th scope="col">time</th>
        <th scope="col">payment_status</th>
        <th scope="col">amount</th>
      </tr>
    </thead>
</table>

Controller Code:

public function Appointments(Request $request)
    {
        if ($request->ajax()) {
            $data =  DB::table('jobs')->select('id', 'date', 'time', 'payment_status', 'amount')->get();
            return Datatables::of($data)
                    ->addIndexColumn()
                    ->make(true);
        }

        return view('admin.show_appointments');
    }

Ajax Code:

$(function () {

    $('#appointment-datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('appointments') }}",
        columns: [
            {data: 'id', name: 'id'},
            {data: 'date', name: 'date'},
            {data: 'time', name: 'time'},
            {data: 'payment_status', name: 'payment_status'},
        ]
    });

  });

I hope it'll help you

Answer 2

Try adding token in your header

<meta name="csrf-token" content="{{ csrf_token() }}" />

And in your ajaxSetup or data add the token

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

Also change getAppointmentData function.

public function getAppointmentData(Request $request)
    {
        if ($request->ajax())
        {
            $getData = DB::table('jobs')->select('id', 'date', 'time', 
            'payment_status', 'amount');
            return DataTables::of($getData)->make(true);
        } 
    }