DataTables warning: table id=DataTables_Table_0 - Ajax error - Laravel

I share full details with Sample Code from my Project, this below Example code is a Manage Role DataTable from my project. please refer step by step & try to understand it.

first of all you need to install Laravel Yajra DataTable using below Composer command

composer require yajra/laravel-datatables-oracle

then after Define Routes in web.php as like my sample code

Route::get('/', [\App\Http\Controllers\Admin\RoleController::class, 'index'])->name('admin.roles.index');  //index all the data view...

Route::post('/', [\App\Http\Controllers\Admin\RoleController::class, 'getIndexUsers'])->name('admin.roles.getIndexRoles');  //Get Users for Laravel Yajra Datatable Index Page record...

then after create view file for it, I share sample from my project

<div class="card-body">
   <table id="role_table" class="table table-bordered table-striped w-100">
       <thead>
          <tr>
             <th>No.</th>
             <th>Role Name</th>
             <th>Role Slug</th>
             <th>Action</th>
          </tr>
       </thead>
                  
       <tfoot>
            <tr>
               <th>No.</th>
               <th>Role Name</th>
               <th>Role Slug</th>
               <th>Action</th>
            </tr>
       </tfoot>
   </table>
</div>
<!-- /.card-body -->

& in Footer Script define Function for Initialize the DataTable like below,

<script type="text/javascript">
    var dataTable = $('#role_table').DataTable({
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        processing: true,
        serverSide: true,
        order: [],
        searchDelay: 500,
        "scrollX": "auto",
        "responsive": true,
        // "lengthChange": false,
        "autoWidth": true,
        ajax: {
            url: '{{ route("admin.roles.getIndexRoles")}}',
            type: 'post',
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          data: function (data) {
                // data.fromValues = $("#filterUserType").serialize();
            },
        },
        columns: [
            {data: 'SrNo', //try with data: 'SrNo' OR data: 'id',
                render: function (data, type, row, meta) {
                    // return meta.row + meta.settings._iDisplayStart + 1;
                    return meta.row + 1;
                }, searchable: false, sortable: false
            },
            {data: 'role_name', name: 'role_name'},
            {data: 'role_slug', name: 'role_slug'},
            {data: 'action', name: 'action', searchable: false, sortable: false},
        ],
    });
  </script>

then after In your Controller load Yajra DataTable Class for use it

use Yajra\DataTables\DataTables; //for Laravel DataTable JS...

Now, create Function for Display View File like this,

public function index()
{
    return view('admin.roles.index');
}

Now I crated Function method for Ajax Request for DataTable Initialize

public function getIndexUsers(Request $request)
{
    $roles = Role::select('roles.*');
    if($request->order ==null){
        $roles->orderBy('id', 'desc');
    }
    $detail_data = $roles;
    return Datatables::of($detail_data)
        ->addColumn('action', function ($data) {
            return $this->DataTableAction($data);
        })
    ->rawColumns(['action'])
    ->make(true);
}

public function DataTableAction($data){
    $btn = '<div class="btn-group">';
        if($data->id == "1" || $data->id == "2"){
            $btn .= '<button type="button" class="btn btn-danger dropdown-toggle ml-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled>Action
                </button>';
        }else{
            $btn .= '<button type="button" class="btn btn-danger dropdown-toggle ml-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action
                    </button>';
        }
            $btn .= '<div class="dropdown-menu">';
            $btn .= '<a class="dropdown-item" href="'.route('admin.roles.edit',$data->id).'" style="color: black;" onmouseover=\'this.style.background="#dee2e6"\' onmouseout=\'this.style.background="none"\'><i class="far fa-edit text-primary"></i> Edit</a>';
            $btn .= '<div class="dropdown-divider"></div>';
            $btn .= '<a role_id="'.$data->id.'" class="dropdown-item deleteRole" href="#" style="color: black;" onmouseover=\'this.style.background="#dee2e6"\' onmouseout=\'this.style.background="none"\'><i class="far fa-trash-alt text-danger"></i> Delete</a>';
    $btn .= '</div>
        </div>';
    return $btn;
}

Important Note:- Currently I use Laravel 8 So, It's not necessary to needs to define Yajra Service Provider Class in config/app.php . But if you are getting any error in your different Laravel version then you wil needs to define Yajra Service Provider Class in config/app.php... for define it follow below steps

**

Note that, below step not compulsory, its depends on your Laravel version

**

config/app.php

.....
'providers' => [
    ....
    Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
    ....
    'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
.....

then Run below Command

php artisan optimize

then if you get any problem, try to Clear Cache using

php artisan cache:clear

Important Note:- If you define Service Provider Class in config/app.php & run optimize command, then May be Laravel will load it in autoload which is automatically called when your code references a class or interface that hasn't been loaded yet, I'm not sure

if everything is ok in the app codes, you may loosed config for yajra.. so to configure it, you can go to the config folder in the app root directory and then open app.php file from there and add this line to the provider..

Yajra\DataTables\DataTablesServiceProvider::class

the result will be something like this:

    'providers' => [
     ..
     .. 
     ..
Yajra\DataTables\DataTablesServiceProvider::class,
    ]

and also add this line to the aliases:

Yajra\DataTables\Facades\DataTables::class

try like this:

'aliases' => [
 ..
 ..
 ..
 ..
 'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]

finally, save the file(config\app.php) like above and then open up cmd or terminal and try to clear the app cached file(that includes the config cache) using the fallowing command:

php artisan optimize

add this code in html file

<script>
    $.fn.dataTable.ext.errMode = 'throw';
</script>