Laravel集成DataTables遇Ajax错误：表格无法显示数据求助

在Laravel项目中按照教程完成DataTables集成后，数据无法正常显示，反复弹出“DataTables warning: table id=DataTables_Table_0 - Ajax error”提示，控制台存在报错：

以下是相关代码，请求排查问题根源：

控制器代码 #

use App\Models\Totalmember;
use Yajra\DataTables\DataTables;

public function totalviewmembers(Request $request)
{
    if ($request->ajax()) {
        $data = Totalmember::select('membername', 'cellnumber', 'branchname', 'presentaddress', 'uniqueid');
        return DataTables::of($data)
            ->addColumn('action', function ($row) {
                return '<a href="'.url('edit/'.$row->uniqueid).'" class="btn btn-sm btn-primary">Edit</a>';
            })
            ->rawColumns(['action'])
            ->make(true);
    }

    // Load the view
    return view('admin.totalmember.viewtotalmembers');
}

路由代码 #

Route::get('/viewmember', [TotalmembersController::class, 'totalviewmembers']);

Blade视图代码 #

<table class="table table-bordered data-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Mobile Number</th>
            <th>Branch Name</th>
            <th>Present Address</th>
            <th style="display: none;">Unique ID</th> <!-- Hidden -->
            <th>Action</th>
        </tr>
    </thead>
</table>

<script>
    $(function () {
        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ url('totalviewmembers') }}", // AJAX Route
            columns: [
                {data: 'membername', name: 'membername'},
                {data: 'cellnumber', name: 'cellnumber'},
                {data: 'branchname', name: 'branchname'},
                {data: 'presentaddress', name: 'presentaddress'},
                {
                    data: 'uniqueid', 
                    name: 'uniqueid',
                    visible: false, // Hidden column
                    searchable: true // Used for search functionality
                },
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ]
        });
    });
</script>

问题排查与修复建议 #

1. 路由与AJAX URL不匹配（核心问题） #

路由定义的访问路径是/viewmember，但Blade中DataTables的AJAX请求路径是totalviewmembers，两者不一致会导致404错误，这是触发Ajax error提示的最直接原因。

修复方案二选一：

• 修改路由，将路径改为totalviewmembers：

  Route::get('/totalviewmembers', [TotalmembersController::class, 'totalviewmembers']);
  

• 或修改Blade中的AJAX URL，与路由保持一致：

  ajax: "{{ url('viewmember') }}",
  

2. 验证模型字段正确性 #

确认Totalmember模型对应的数据库表中，membername、cellnumber、branchname、presentaddress、uniqueid这些字段真实存在，且字段名大小写完全匹配（数据库字段名通常为蛇形命名，需避免与模型中的驼峰命名混淆）。

3. 检查Yajra DataTables安装状态 #

确保已通过Composer正确安装依赖：

composer require yajra/laravel-datatables-oracle:"^10.0" # 根据Laravel版本选择对应版本

Laravel 5.5+会自动发现服务提供者，若版本较低，需手动在config/app.php中添加：

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

4. 查看AJAX请求响应详情 #

打开浏览器开发者工具（F12）→ 切换到「Network」标签，找到DataTables发起的AJAX请求，查看「Response」内容，Laravel通常会返回具体的错误信息（如路由不存在、字段不存在等），帮助定位问题。

5. CSRF令牌验证（若后续改为POST请求） #

如果后续将AJAX请求改为POST方法，需确保请求携带CSRF令牌：

• 在Blade头部添加meta标签：

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

• 在DataTables的AJAX配置中添加请求头：

  ajax: {
      url: "{{ url('viewmember') }}",
      type: "POST",
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
  },
  

内容的提问来源于stack exchange，提问作者devrashed