Yajra DataTables服务端按公司名称分组展示员工问题求助

我来帮你搞定这个行分组的需求，咱们从后端到前端一步步调整代码，适配你的现有实现：

一、后端代码调整 #

首先要确保员工模型已关联公司模型，同时在DataTables查询中加载关联数据、按公司名称排序（这是分组的核心前提），还要配置正确的列信息：

public function index(DataTablesBuilderService $builder) {
    // 定义所有需要展示的列，包含分组字段和员工字段
    $columns = [
        // 公司名称字段：用于分组，设置为隐藏（避免表格重复显示）
        'company_name' => [
            'title' => "Company",
            'name' => 'companies.name',
            'data' => 'companies.name',
            'visible' => false,
        ],
        // 员工姓名列
        'employee_name' => [
            'title' => "Employee Name",
            'name' => 'employees.name',
            'data' => 'name',
        ],
        // 按需添加其他员工字段，比如职位、邮箱等
        'position' => [
            'title' => "Position",
            'name' => 'employees.position',
            'data' => 'position',
        ],
    ];

    // 构建基础查询：关联公司表，强制按公司名称排序（保证数据有序才能正确分组）
    $query = Employee::with('company')
        ->join('companies', 'employees.company_id', '=', 'companies.id')
        ->orderBy('companies.name');

    $dataTables = $builder
        ->setQuery($query) // 绑定查询逻辑
        ->setUrl(route('api.employee_details.data_tables', request()->all()))
        ->withIndex()
        ->setColumns($columns)
        // 传递前端DataTables配置，启用行分组功能
        ->setOptions([
            'rowGroup' => [
                'dataSrc' => 'companies.name', // 指定分组的数据源字段
            ],
            // 默认按公司名称排序，维持分组的有序性
            'order' => [[0, 'asc']],
        ]);

    return view('employee_details.index')->with([
        'dataTables' => $dataTables,
    ]);
}

二、Blade模板调整 #

你的现有表格调用可以直接保留，若需要优化分组行样式，后续可以通过CSS调整：

{!! $dataTables->table(['class' => 'table table-bordered','style' => 'width:100%', 'cellspacing' => '0']) !!}

三、脚本与样式调整 #

默认的$dataTables->scripts()不会自动加载rowGroup插件，需要手动引入扩展，同时可以自定义分组行的渲染效果：

{!! $dataTables->scripts() !!}

<!-- 引入DataTables rowGroup扩展的CSS和JS -->
<link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.4.1/css/rowGroup.dataTables.min.css">
<script src="https://cdn.datatables.net/rowgroup/1.4.1/js/dataTables.rowGroup.min.js"></script>

<script>
$(document).ready(function() {
    // 获取Yajra生成的DataTables实例（默认ID为dataTableBuilder）
    var table = $('#dataTableBuilder').DataTable();

    // 自定义分组行的内容：显示公司名称+员工数量，添加醒目样式
    table.rowGroup().startRender(function(rows, group) {
        return $('<tr/>')
            .append('<td colspan="' + table.columns().visible().length + '" class="bg-secondary text-white py-2">' + group + ' (' + rows.count() + ' 名员工)' + '</td>')
            .addClass('group-header');
    });
});
</script>

<!-- 自定义分组行样式 -->
<style>
.group-header {
    font-size: 1.1em;
    font-weight: bold;
}
</style>

关键细节解释 #

1. 后端排序的必要性：
   DataTables的rowGroup功能完全依赖有序的数据，所以必须在后端强制按分组字段（companies.name）排序，否则前端无法正确合并同组行。

2. 隐藏分组列：
   将公司名称列设置为visible: false，避免表格中重复显示分组字段，但该字段仍会在后端返回的数据源中存在，供rowGroup使用。

3. 自定义分组行：
   通过startRender方法可以完全控制分组行的HTML结构和样式，比如添加员工数量统计、调整背景色，让分组更直观。

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