php, Laravel 7 - Unable to receive data from AJAX request

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

My problem is, I tried to pass my data from the controller by using AJAX request in 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 in a master page (where I didn't use any Blade directives). I tried to dd() the data in the controller and it does shows 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 in the child page.

bold

code

index.blade.php (child page)

@extends('layouts.app')

@section('content')

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>


@endsection

@push('child-scripts')
    [removed]"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">[removed]
    <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 = 'Edit Delete';
                    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.