Laravel 如何通过Ajax在Yajra Datatables中展示关联表对应字段

实现方案 #

步骤1：修改Branch控制器的ajax查询逻辑 #

你已经在Branch模型里定义好了关联关系，只需要在查询时预加载关联模型，再添加对应展示字段即可，同时优化serverside模式下的查询性能：

public function branch(Request $request)
{
    $branches = Branch::latest()->get();
    $areas = Area::latest()->get();
    $branchManagers = BranchManager::latest()->get();

    if ($request->ajax()) {
        // with方法预加载关联，避免N+1查询问题，不调用get让datatable处理分页、排序、搜索
        $data = Branch::with(['area', 'branchManager'])->latest();
        return Datatables::of($data)
        ->addIndexColumn()
        // 添加区域名称字段，optional方法避免关联数据为空时报错
        ->addColumn('area_desc', function($row){
            return optional($row->area)->area_desc ?? '-';
        })
        // 添加网点经理名称字段
        ->addColumn('branch_manager_name', function($row){
            return optional($row->branchManager)->branch_manager_name ?? '-';
        })
        ->addColumn('action', function($row){
            $btn = '<a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="Edit" class="btn btn-sm btn-outline-light editRecord">Edit</a>';
            $btn = $btn.' <a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="Delete" class="btn btn-sm btn-outline-light deleteRecord"><i class="far fa-trash-alt btn-outline-danger"></i></a>';
            return $btn;
        })
        ->rawColumns(['action'])
        ->make(true);
    }

    return view('admin.branch', compact('branches', 'areas', 'branchManagers'));
}

步骤2：修改Blade视图中的Datatable列配置 #

把原来展示外键ID的两列，替换成我们新增的展示字段，同时配置name属性支持关联字段的搜索和排序：

<script type="text/javascript">
        $(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            var table = $('.table-striped.first').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('settings.branch.list') }}",
                columns: [{
                        data: 'branch_name',
                        name: 'branch_name'
                    },
                    {
                        data: 'branch_address1',
                        name: 'branch_address1'
                    },
                    {
                        data: 'branch_address2',
                        name: 'branch_address2'
                    },
                    // 替换原来的area_id列
                    {
                        data: 'area_desc',
                        name: 'area.area_desc'
                    },
                    // 替换原来的branch_manager_id列
                    {
                        data: 'branch_manager_name',
                        name: 'branchManager.branch_manager_name'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: true,
                        searchable: true
                    },
                ]
            });
</script>

修改完成后刷新页面即可看到外键ID已经替换为对应的区域名称和经理名称，同时支持对这两个字段的搜索和排序操作。

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