php，Laravel 7 - 无法从 AJAX 请求接收数据

Question

I'm still a newbie and currently learning how to use Laravel 7.

My problem is, I tried to pass my data from the controller by using an AJAX request on my child page. I noticed that when I tried to pass the data from my child page, the page won't receive it but somehow it's working on a master page (where I didn't use any Blade directives). I tried to dd() the data in the controller and it does show that there is data. But it won't pass it to the child page. All the JS files and custom script that I push does come out on the child page.

blade

code

index.blade.php (child page)

@extends('layouts.app')

@section('content')

<div class="container">
<div class="container mt-5">
        <h2 class="mb-4">Laravel 7 Yajra Datatables Example</h2>
        <table class="table table-bordered yajra-datatable">
            <thead>
                <tr>
                    <th class="text-center">#</th>
                    <th class="text-center">Name</th>
                    <th class="text-center">Batch</th>
                    <th class="text-center">Graduation Year</th>
                    <th class="text-center">Mobile</th>
                    <th class="text-center">Action</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

@endsection

@push('child-scripts')
    <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 = $('.yajra-datatable').DataTable({
          processing: true,
          serverSide: true,
          ajax: "{{ route('alumni-list') }}",
          columns: [
              {data: 'DT_RowIndex', name: 'DT_RowIndex'},
              {data: 'name', name: 'name'},
              {data: 'batch_year', name: 'batch_year'},
              {data: 'graduation_year', name: 'graduation_year'},
              {data: 'contact_no', name: 'contact_no'},
              {
                  data: 'action', 
                  name: 'action', 
                  orderable: true, 
                  searchable: true
              },
          ]
      });
      
    });
    </script>
    @endpush 

AlumniController.php

class AlumniController extends Controller
{
    public function index(Request $request)
    {
        // dd(Profile::latest()->get());
        if ($request->ajax()) {
            $data = Profile::latest()->get();
            return Datatables::of($data)
                ->addIndexColumn()
                ->addColumn('action', function($row){
                    $btn = '<a href="javascript:void(0)" class="edit btn btn-success btn-sm">Edit</a> <a href="javascript:void(0)" class="delete btn btn-danger btn-sm">Delete</a>';
                    return $btn;
                })
                ->rawColumns(['action'])
                ->make(true);
        }
      
        return view('admin.users.index');
    }
}

Alumni Route

Route::get('alumni', [
        'uses' => 'AlumniController@index',
        'as' => 'alumni-list'
    ]);

Thank you for your time, sir.

Answer 1

Solved it after MORE googling done.

Make sure to add defer inside your DataTable CDN.

Example:

<script src = "http://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js" defer ></script>

Here's the link where I found the answer: https://datatables.net/forums/discussion/50869/typeerror-datatable-is-not-a-function-datatable-laravel

For more understanding on why defer is added: https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

Answer 2

use Yajra\\DataTables\\Contracts\\DataTable; use Yajra\\DataTables\\Facades\\DataTables; please use this two line in your controller