ASP.NET Core Razor Pages动态DataTable仅首个客户显示筛选选项问题

核心原因 #

多个模态弹窗内的DataTable容器使用了重复ID，或是初始化代码仅针对第一个匹配元素执行，导致后续弹窗的DataTable未被正确初始化，进而丢失筛选、分页控件。

具体修复步骤 #

1. 给每个模态框及内部表格设置唯一ID #

在Razor循环生成客户模态框时，将客户ID作为后缀拼接在容器ID上，彻底避免DOM ID冲突：

@foreach (var customer in Model.Customers)
{
    <div class="modal fade" id="attendanceModal_@customer.Id" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">@customer.Name 考勤详情</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table id="attendanceTable_@customer.Id" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>日期</th>
                                <th>状态</th>
                                <th>备注</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var record in customer.AttendanceRecords)
                            {
                                <tr>
                                    <td>@record.Date.ToShortDateString()</td>
                                    <td>@record.Status</td>
                                    <td>@record.Remarks</td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
}

2. 绑定模态框显示事件，按需初始化DataTable #

不要在页面加载时一次性初始化所有隐藏表格，而是监听模态框的shown.bs.modal事件，在弹窗完全显示后，针对当前弹窗内的表格单独初始化：

// 监听所有考勤模态框的显示事件
$('.modal[id^="attendanceModal_"]').on('shown.bs.modal', function() {
    var customerId = $(this).attr('id').split('_')[1];
    var tableSelector = '#attendanceTable_' + customerId;
    
    // 避免重复初始化DataTable
    if (!$.fn.DataTable.isDataTable(tableSelector)) {
        $(tableSelector).DataTable({
            paging: true,
            searching: true,
            ordering: true,
            info: true,
            // 其他自定义配置项
        });
    }
});

3. 确保弹窗触发按钮指向正确的模态框 #

修改打开弹窗的按钮，让data-target属性对应唯一的模态框ID：

@foreach (var customer in Model.Customers)
{
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#attendanceModal_@customer.Id">
        查看@customer.Name考勤
    </button>
}

额外注意事项 #

• 隐藏状态下的表格无法正确渲染DataTable控件，必须等弹窗显示后再初始化。
• 如果采用AJAX异步加载考勤数据，需在数据填充完成后再执行DataTable初始化逻辑。

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