Laravel中使用rowspan时DataTables报错无法正常显示求助

问题原因 #

DataTables要求表格的每一行单元格数量必须与表头列数完全一致。你当前的代码中，使用rowspan合并Date和Action列后，后续的产品行缺少了这两列的单元格，导致行内单元格总数少于表头的9列，DataTables无法正确初始化单元格索引，从而抛出Uncaught TypeError: Cannot set properties of undefined (setting '_DT_CellIndex')错误。

解决方案 #

给缺少单元格的行补充对应数量的空单元格，保证每行单元格数与表头一致：

修改后的表格循环代码 #

@foreach ($stocks as $index => $stock)
    @php
        $count = $stock->products->count();
    @endphp
    <tr>
        <td rowspan="{{ $count }}" class="align-middle rowspan-cell">
            {{ $stock->date }}
        </td>
        <td>{{ $stock->products?->first()?->plant_name }}</td>
        <td>{{ $stock->products?->first()?->mainProduct->name }}</td>
        <td>{{ $stock->products?->first()?->mainSize->size }}</td>
        <td>{{ $stock->products?->first()?->cement_packs }}</td>
        <td>{{ $stock->products?->first()?->no_pallets }}</td>
        <td>{{ $stock->products?->first()?->tiles_pallets }}</td>
        <td>{{ $stock->products?->first()?->total_tiles_sft }}</td>
        <td rowspan="{{ $count }}" class="align-middle rowspan-cell">
            <!-- edit -->
            <a class="btn  btn-sm btn-parrot-green text-white" href=""><i
                    class="fa-solid fa-pencil"></i></a>
            <!-- delete -->
            @php
                $modelId = 'modelDelete' . $stock->id;
            @endphp
            @component('components.delete-model', ['modelId' => $modelId, 'Action' => route('tuffTile.destroy', $stock->id)])
            @endcomponent
        </td>
    </tr>
    @if ($count > 1)
        @foreach ($stock->products->slice(1) as $product)
            <tr>
                <td></td> {{-- 补充Date列的空单元格，匹配rowspan位置 --}}
                <td>{{ $product->plant_name }}</td>
                <td>{{ $product->mainProduct->name }}</td>
                <td>{{ $product->mainSize->size }}</td>
                <td>{{ $product->cement_packs }}</td>
                <td>{{ $product->no_pallets }}</td>
                <td>{{ $product->tiles_pallets }}</td>
                <td>{{ $product->total_tiles_sft }}</td>
                <td></td> {{-- 补充Action列的空单元格，匹配rowspan位置 --}}
            </tr>
        @endforeach
    @endif
@endforeach

优化：隐藏空单元格（可选） #

如果不想让空单元格显示，可以用Bootstrap的d-none类隐藏：

<td class="d-none"></td>

这样既满足DataTables的列数要求，又不影响页面视觉效果，DataTables就能正常初始化运行了。

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