Laravel - DataTables warning: table id=userTable - Invalid JSON response (This request has no response data available)

I am trying to retrieve data from database and display it into Data Table but this error is keep appearing:

DataTables warning: table id=userTable - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

When I tried to check its response in Developer tools (I use Chromium Edge) it does not have any data and contains only message:

This request has no response data available

I have this in my web.php:

Route::get('user/datatable', 'UserController@datatable')->name('user/datatable')->middleware('role:admin');

My snippet code from controller file (UserController):

public function datatable()
{
    $data = User::where('status', '=', 1)->get();
    
    return DataTables::of($data)
        ->addColumn('action', function($data){

        $url_edit = url('user/'.$data->id.'/edit');
        $url = url('user/'.$data->id);
        
        $view = "<a class = 'btn btn-primary' href = '".$url."' title = 'View'><i class = 'nav icon fas fa-eye'></i></a>";
        $edit = "<a class = 'btn btn-warning' href = '".$url_edit."' title = 'Edit'><i class = 'nav icon fas fa-edit'></i></a>";
        $delete = "<button data-url = '".$url."' onclick = 'deleteData(this)' class = 'btn btn-action btn-danger' title = 'Delete'><i class = 'nav-icon fas fa-trash-alt'></i></button>";
        
        return $view."".$edit."".$delete;
    }) 
    ->rawColumns(['action'])
    ->editColumn('id', 'ID:{{$user_id}}')
    ->make(true);
}

My snippet code from the index blade file (jscript part at the bottom of blade file):

@push('js')
<script>
  $(document).ready(function () {
    var table1 = $("#userTable").DataTable({
      responsive:true,
      processing:true,
      pagingType: 'full_numbers',
      stateSave:false,
      scrollY:true,
      scrollX:true,
      autoWidth: false,
      ajax:"{{url('user/datatable')}}",
      order:[0, 'desc'],
      columns:[
        {data:'first_name', name: 'First Name'},
        {data:'last_name', name: 'First Name'},
        {data:'email', name: 'E-Mail Address'},
        {data:'action', name: 'Action', searchable: true, sortable:true},
      ]
    });
...
</script>
@endpush

And finally where the data will be displayed (index blade file):

<table id="userTable" class="table table-bordered table-striped" data-toggle = "table1_" style = "width: 100%;">
                <thead>
                    <tr>
                      <th class="all">First Name</th>
                      <th class="all">Last Name</th>
                      <th class="all">E-Mail Address</th>
                      <th class="all">Action</th>
                    </tr>
                </thead>
              
                <tfoot>
                    <tr>
                      <th>First Name</th>
                      <th>Last Name</th>
                      <th>E-Mail Address</th>
                      <th>Action</th>
                    </tr>
                </tfoot>
              </table>

I don't know what's wrong or where's the part that causes an error or problem because it doesn't show any response or data.

When i try to display the contents of this line by using dd():

$data = User::where('status', '=', 1);

It does not show any data from database but when I try this code that does the same it retrieves data from the database but still the DataTable error is appearing:

$data = DB::table('users')
                ->select('*')
                ->where('status', '=', 1)
                ->orderBy('id', 'desc')
                ->get();

I don't exactly know whether the data retrieval or data displaying implementation or both is the problem.

What is the cause/s of the error/s or problem/s that results?