带合并行列的动态PHP表格实现DataTables分页搜索方案咨询

我用PHP动态生成了一个带多行合并结构的表格（该结构为业务必需，不可修改），已实现对应结构，但因为存在动态行，无法正常应用DataTables的分页和搜索功能，初始化后完全没效果。

表格代码如下：

<table class="table table-striped table-hover table-bordered" id="myTable" style="margin-bottom: 5rem; width:100%;">
    <thead>
    <tr>
        <th rowspan="2" class="tHeader">S.No.</th>
        <th rowspan="2" class="tHeader">Name & Designation</th>
        <th colspan="5" class="tHeader">Year 2023</th>
        <th colspan="5" class="tHeader">Year2024</th>
    </tr>
    <tr>
        <th class="tHeader">Details of property 2023</th>
        <th class="tHeader">Present Value 2023</th>
        <th class="tHeader">How acquire 2023</th>
        <th class="tHeader">Annual Income 2023</th>
        <th class="tHeader">Remarks 2023</th>
        <th class="tHeader">Details of property 2024</th>
        <th class="tHeader">Present Value 2024</th>
        <th class="tHeader">How acquire 2024</th>
        <th class="tHeader">Annual Income 2024</th>
        <th class="tHeader">Remarks 2024</th>
    </tr>
    </thead>
    <tbody>
    <?php if(!empty($infoData))
    {
        $i = 1;
        foreach($infoData as $row)
        {
            $prev_types = explode("<br>", $row['prop_type_prev']);
            $prev_addresses = explode("<br>", $row['prev_address']);
            $prev_values = explode("<br>", $row['value_prev']);
            $annual_prev = explode("<br>", $row['annual_prev']);
            $remarks_prev = explode("<br>", $row['remarks_prev']);
            $on_name_prev = explode("<br>", $row['on_name_prev']);
            $person_prev = explode("<br>", $row['person_prev']);
            $rrt_name_prev = explode("<br>", $row['rrt_name_prev']);
            $prop_acq_type_name_prev = explode("<br>", $row['prop_acq_type_name_prev']);
            $acq_date_prev = explode("<br>", $row['acq_date_prev']);
            $share_prev = explode("<br>", $row['share_prev']);

            $prop_type_name_curr = explode("<br>", $row['prop_type_name_curr']);
            $current_address = explode("<br>", $row['current_address']);
            $present_value_curr = explode("<br>", $row['present_value_curr']);
            $annual_income_curr = explode("<br>", $row['annual_income_curr']);
            $remarks_curr = explode("<br>", $row['remarks_curr']);
            $string_agg = explode("<br>", $row['string_agg']);
            $person_current = explode("<br>", $row['person_current']);
            $rrt_name_curr = explode("<br>", $row['rrt_name_curr']);
            $prop_acq_type_name_curr = explode("<br>", $row['prop_acq_type_name_curr']);
            $acq_date_curr = explode("<br>", $row['acq_date_curr']);
            $share_curr = explode("<br>", $row['share_curr']);


            $rowspan = max(count($prev_types), count($prev_addresses), count($prev_values));

            for($j = 0; $j < $rowspan; $j++)
            { ?>
                <tr>
                    <?php if($j == 0) { ?>
                        <td rowspan="<?= $rowspan; ?>"><?= $i++; ?></td>
                        <td rowspan="<?= $rowspan; ?>"><?= $row['emp_code'] . " " . $row['emp_name'] . " " . $row['desig']; ?></td>
                    <?php } ?>

                    <td><?= isset($prev_types[$j]) ? $prev_types[$j] . " " . $prev_addresses[$j] : ''; ?></td>
                    <td><?= isset($prev_values[$j]) ? $prev_values[$j] : ''; ?></td>
                    <td><?php
                        if($on_name_prev[$j] == 2)
                        {
                            echo isset($person_prev[$j]) ? $person_prev[$j] . " " . $rrt_name_prev[$j] . "<br>" : 'null';
                        } else if($on_name_prev[$j] == 1)
                        {
                            echo 'self' . "<br>";
                        } else
                            echo " " . "<br>";
                        echo isset($prop_acq_type_name_prev[$j]) ? $prop_acq_type_name_prev[$j] . " " : '';
                        if(isset($acq_date_prev[$j]) && !empty($acq_date_prev[$j]))
                        {
                            echo date('d-m-Y', strtotime($acq_date_prev[$j])) . " ";
                        } else
                        {
                            echo "";
                        }
                        echo isset($share_prev[$j]) ? $share_prev[$j] : '';
                        ?></td>
                    <td><?= isset($annual_prev[$j]) ? $annual_prev[$j] : ''; ?></td>
                    <td><?= isset($remarks_prev[$j]) ? $remarks_prev[$j] : ''; ?></td>


                    <td><?= isset($prop_type_name_curr[$j]) ? $prop_type_name_curr[$j] . " " . $current_address[$j] : ''; ?></td>
                    <td><?= isset($present_value_curr[$j]) ? $present_value_curr[$j] : ''; ?></td>
                    <td><?php
                        if(isset($string_agg[$j]) && $string_agg[$j] == 2)
                        {
                            echo isset($person_current[$j]) ? $person_current[$j] . " " . $rrt_name_curr[$j] . "<br>" : 'null';
                        } else if(isset($string_agg[$j]) && $string_agg[$j] == 1)
                        {
                            echo 'self' . "<br>";
                        } else
                            echo " " . "<br>";
                        echo isset($prop_acq_type_name_curr[$j]) ? $prop_acq_type_name_curr[$j] . " " : '';
                        if(isset($acq_date_curr[$j]) && !empty($acq_date_curr[$j]))
                        {
                            echo date('d-m-Y', strtotime($acq_date_curr[$j])) . " ";
                        } else
                        {
                            echo "";
                        }
                        echo isset($share_curr[$j]) ? $share_curr[$j] : '';
                        ?></td>
                    <td><?= isset($annual_income_curr[$j]) ? $annual_income_curr[$j] : ''; ?></td>
                    <td><?= isset($remarks_curr[$j]) ? $remarks_curr[$j] : ''; ?></td>
                </tr>
            <?php }
        }
    } ?>
    </tbody>
</table>

针对带合并行的表格，要让DataTables正常启用分页和搜索功能，需按以下步骤处理：

1. 修复PHP代码中的变量错误 #

你的代码中存在变量名不匹配问题：定义了$on_name_prev = explode("<br>", $row['on_name_prev']);，但使用时错误调用了未定义的$prop_on_name_prev[$j]，这会导致PHP报错，破坏表格结构，进而让DataTables无法正常识别表格。需将所有$prop_on_name_prev替换为$on_name_prev。

2. 配置DataTables关键参数 #

初始化DataTables时，必须添加适配合并表头的配置，确保组件能正确解析表格结构：

$(document).ready(function() {
    $('#myTable').DataTable({
        // 基于顶层表头进行排序，避免合并列冲突
        orderCellsTop: true,
        // 启用分页和搜索
        paging: true,
        searching: true,
        // 列定义：指定合并列的目标，确保搜索排序正常
        columnDefs: [
            { targets: [0, 1], orderable: true },
            { targets: '_all', orderable: true }
        ],
        // 可选：保持分页后合并行的视觉一致性
        createdRow: function(row, data, index) {
            // 可根据业务逻辑添加样式或标识，比如给合并行的子行添加缩进
        }
    });
});

3. 确保表格结构合规 #

• 所有<tr>的列数必须与表头总列数一致（你的表格表头总列数是12：2个合并列 + 5+5个年度列），动态生成的每一行都要满足这个要求
• 合并行的rowspan属性必须准确，避免列数错乱

4. 验证依赖引入 #

确保页面已正确引入jQuery、DataTables的CSS和JS文件，比如：

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

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