如何在DataTable中仅当行日期与下一行不同时添加行底边框

方案一：前端DataTable渲染后处理（推荐） #

由于DataTable会重新渲染表格DOM，后端循环添加的样式容易被覆盖，前端处理更稳妥：

• 先定义CSS样式类：

.border-bottom-thick {
    border-bottom: 2px solid #000; /* 可根据需求调整边框样式 */
}

• 在DataTable的drawCallback回调中处理行样式：

$(document).ready(function() {
    $('#your-table-id').DataTable({
        // 你的DataTable配置参数
        drawCallback: function() {
            const table = this.api();
            const rows = table.rows({ page: 'current' }).nodes();
            
            // 遍历当前页所有行，跳过最后一行
            for (let i = 0; i < rows.length - 1; i++) {
                const currentDate = $(rows[i]).find('.date-column').text().trim();
                const nextDate = $(rows[i+1]).find('.date-column').text().trim();
                
                if (currentDate !== nextDate) {
                    $(rows[i]).addClass('border-bottom-thick');
                } else {
                    $(rows[i]).removeClass('border-bottom-thick');
                }
            }
            
            // 移除最后一行的边框（按需调整）
            if (rows.length > 0) {
                $(rows[rows.length - 1]).removeClass('border-bottom-thick');
            }
        }
    });
});

注意：

• 给表格的日期列添加统一类名（比如date-column），方便JS定位获取日期文本
• drawCallback会在表格分页、排序、搜索后重新触发，保证样式始终正确

方案二：后端Laravel循环处理（仅适用于客户端渲染的DataTable） #

如果你的DataTable是客户端渲染（所有数据一次性加载），可以在Laravel模板中提前判断相邻行日期：

<table id="your-table-id">
    <thead>
        <!-- 表头内容 -->
    </thead>
    <tbody>
        @foreach($data as $index => $item)
            @php
                $addBorder = false;
                // 判断是否为非最后一行，且当前行日期与下一行不同
                if ($index < count($data) - 1 && $item->date !== $data[$index+1]->date) {
                    $addBorder = true;
                }
            @endphp
            <tr class="{{ $addBorder ? 'border-bottom-thick' : '' }}">
                <td class="date-column">{{ $item->date }}</td>
                <!-- 其他列内容 -->
            </tr>
        @endforeach
    </tbody>
</table>

同样需要定义CSS类：

.border-bottom-thick {
    border-bottom: 2px solid #000;
}

注意：若DataTable启用了服务器端分页（serverSide: true），该方案会失效，因为每页数据独立获取，相邻行可能不在同一页，此时必须使用方案一。

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