Yajra DataTables提示project_name参数未知错误如何修复

问题场景 #

基于Laravel的Yajra DataTables扩展实现服务端渲染数据表格时，页面抛出如下错误：

DataTables warning: table id=patient_table - Requested unknown parameter 'project_name' for row 0, column 2.

问题相关代码 #

控制器端代码 #

public function index(Request $request)
{
  $project_supervisor=  project_supervisor::with('project','superviser')->latest()->get();
  
        if ($request->ajax()) {
  $project_supervisor=  project_supervisor::with('project','superviser')->latest()->get();
        return Datatables::of($project_supervisor)
               ->addIndexColumn()
                ->addColumn('action', function( project_supervisor $data){ 
   
                      $button = '<button type="button" name="delete" id="'.$data->id.'" class="delete btn btn-danger btn-sm">Delete</button>';
                    $button .= '&nbsp;&nbsp;';
                    return $button;
                })  
                  ->addColumn('project_name', function (project_supervisor $project_supervisor) {
                return $project_supervisor->project->name;
                
            })
             ->editColumn('created', function(project_supervisor $data) {
                 return date('d/m/y h:i A', strtotime($data->created_at) );
            })
                ->rawColumns(['action','created' ])
                ->make(true);           
    }
    return view('project_supervisor.project_supervisor', compact('project_supervisor'));   
}

前端Blade模板JS代码 #

var table = $('#patient_table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ajax: "{{ route('project.index') }}",
        columns: [
         {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'id', name: 'id'},
            {data: 'project_name', name: 'project.name'},
            {data: 'action', name: 'action'}, 
        ]
    });

报错原因 #

• 核心诱因：自定义project_name列时未做关联空值兼容。当某条记录未关联对应的project数据时，$project_supervisor->project返回null，直接读取->name属性会触发空对象错误，导致接口返回的JSON数据中缺失project_name字段，前端DataTables匹配不到对应字段值就会抛出参数未知错误。
• 性能问题：在AJAX请求判断逻辑之前就执行了全量get()查询，产生不必要的数据库开销；服务端渲染模式下，非AJAX请求只需要加载页面框架，不需要提前拉取全量列表数据。
• 配置问题：前端自定义列的name属性配置为project.name，和后端自定义添加的project_name字段名不一致，会引发后续排序、搜索功能的字段匹配异常。

修复方案 #

1. 优化控制器逻辑，删除冗余查询，给自定义列加空值兼容，同时直接传递查询构建器实例给Datatables（由扩展自动处理分页，性能更好），修改后的控制器代码如下：

public function index(Request $request)
{
    if ($request->ajax()) {
        // 传递查询构建器实例，不要提前调用get()，避免全量查询内存溢出
        $list = project_supervisor::with('project','superviser')->latest();
        return Datatables::of($list)
            ->addIndexColumn()
            ->addColumn('action', function(project_supervisor $data){ 
                $button = '<button type="button" name="delete" id="'.$data->id.'" class="delete btn btn-danger btn-sm">Delete</button>';
                $button .= '&nbsp;&nbsp;';
                return $button;
            })
            ->addColumn('project_name', function (project_supervisor $item) {
                // 增加关联空值判断，关联不存在时返回空字符串，避免空对象报错
                return $item->project ? $item->project->name : '';
            })
            ->editColumn('created', function(project_supervisor $data) {
                return date('d/m/y h:i A', strtotime($data->created_at));
            })
            ->rawColumns(['action','created'])
            ->make(true);           
    }
    // 非AJAX请求直接返回视图，不需要传递全量列表数据
    return view('project_supervisor.project_supervisor');
}

2. 修正前端DataTables列配置，统一自定义列的字段名，同时给不支持排序搜索的操作列加对应配置：

var table = $('#patient_table').DataTable({
    processing: true,
    serverSide: true,
    responsive: true,
    ajax: "{{ route('project.index') }}",
    columns: [
        {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
        {data: 'id', name: 'id'},
        // 自定义列的name属性和后端字段名保持一致
        {data: 'project_name', name: 'project_name'},
        {data: 'action', name: 'action', orderable: false, searchable: false}, 
    ]
});

3. 校验模型关联：确认project_supervisor模型中project关联关系定义正确，关联外键配置无误，从根源减少关联数据为空的问题。

内容的提问来源于stack exchange，提问作者Humaisha Binte Hasan