如何在Yajra Datatable中展示嵌套数组

核心思路 #

通过动态生成DataTable的columns配置，配合render函数读取嵌套数组对应位置的数据，实现与PHP动态生成表头的匹配。

步骤1：确认后端数据结构 #

后端返回的JSON需保证每个主条目包含完整嵌套数组，示例结构如下：

[
  {
    "escuela": "Escuela Primaria 1",
    "curso": "5° Grado",
    "version_anio": [
      {"name": "2022", "value": 25},
      {"name": "2023", "value": 30}
    ],
    "sedes": [
      {"label": "Sede Centro", "count": 15},
      {"label": "Sede Norte", "count": 10}
    ]
  }
]

步骤2：修改前端JS代码 #

利用PHP传递嵌套数组长度到JS，动态构建columns配置，避免循环闭包问题：

// 从PHP获取嵌套数组长度，确保与表头数量一致
var versionAnioCount = {{ count($data[0]->version_anio) }};
var sedesCount = {{ count($data[0]->sedes) }};

// 初始化基础列配置
var columns = [
    {data: 'escuela', name: 'escuela'},
    {data: 'curso', name: 'curso'},
];

// 动态添加version_anio对应列
for (let i = 0; i < versionAnioCount; i++) {
    columns.push({
        data: null, // 不直接绑定字段，用render读取
        name: `version_anio[${i}]`,
        render: function(data, type, row) {
            // 根据实际字段名调整，此处假设子数组元素有value字段
            return row.version_anio[i] ? row.version_anio[i].value : '-';
        }
    });
}

// 动态添加sedes对应列（启用需取消PHP表头注释）
for (let j = 0; j < sedesCount; j++) {
    columns.push({
        data: null,
        name: `sedes[${j}]`,
        render: function(data, type, row) {
            // 根据实际字段名调整，此处假设子数组元素有count字段
            return row.sedes[j] ? row.sedes[j].count : '-';
        }
    });
}

// 初始化DataTable
var table = $('#tabla-resumen').DataTable({
    processing: false,
    serverSide: false,
    ajax: '{{ route("admin/resumen_anual") }}',
    dom: 'Bfltip',
    columns: columns,
    language: {
        url: '//cdn.datatables.net/plug-ins/2.1.4/i18n/es-MX.json',
    },
});

步骤3：启用sedes表头（可选） #

取消PHP代码中sedes表头的注释，确保表头数量与动态生成的columns数量匹配：

{{-- 取消注释启用sedes表头 --}}
@foreach($data[0]->sedes as $sede)
<th> {{ @$sede->label }} </th>
@endforeach

关键注意事项 #

• 确保后端返回的每个主条目里，version_anio和sedes数组长度与表头数量完全一致，避免列错位。
• 使用let声明循环变量，解决JavaScript闭包导致的索引值异常问题。
• 根据实际业务调整render函数中读取的字段名（比如替换value或count为你的实际字段）。

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