模态框动态列场景下DataTable的scrollX翻页后功能异常求助

解决方案 #

这个问题是DataTable在模态框场景下，翻页重绘时无法正确计算容器宽度导致的水平滚动失效，可通过以下步骤修复：

1. 修正DataTable初始化配置

• 新增autoWidth: false关闭自动宽度计算，避免动态列宽计算出错
• 新增drawCallback回调，每次表格重绘（翻页、搜索、排序都会触发）后主动调用columns.adjust()修正列宽和滚动容器尺寸
• 把提前生成的columnRef传入配置的columns参数，你当前代码里定义了这个变量但没有使用，会导致列配置不统一

2. 优化旧表格销毁逻辑

不要直接调用$('#mapattr').empty()清空整个表格，会破坏DataTable需要的DOM结构，只需要清空thead和tbody的内容即可。

3. 可选：给表格外层容器加独立滚动样式

如果还是有滚动异常，给包裹table的div加自定义样式，仅控制表格区域滚动，不会影响顶部的按钮、搜索框和底部分页组件：

.table-scroll-wrap {
    overflow-x: auto;
    width: 100%;
}

修改后的完整代码 #

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document" style="margin:auto !important;max-width:1080px !important;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Map Attributes</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="modalbody_1">
                <!-- 新增自定义滚动容器类 -->
                <div class="table-scroll-wrap">
                    <table id="mapattr" class="display nowrap" style="width:100%" cellspacing="0">
                        <thead></thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
var dataGSet = [];
var dataGArray;
var columnRef = [];

$.get(url, function(data) {
    columnRef = [];
    dataGSet = []; // 每次请求先清空旧数据，避免重复累加
    $("#mapattr > thead").empty().append("<tr></tr>");
    $("#mapattr > tbody").empty();
    $.each(data.features, function(a, b) {
        var cRow = [];
        $.each(b.properties, function(key, value) {
            if (a == 0) {
                $("#mapattr > thead > tr").append("<td>" + key + "</td>");
                columnRef.push({
                    title: key
                })
            }
            cRow.push(value);
        });
        dataGSet.push(cRow);
    });
}).done(function() {
    dataGArray = JSON.parse(JSON.stringify(dataGSet));
    if (!$.fn.DataTable.isDataTable('#mapattr')) {
        $("#mapattr").DataTable({
            dom: 'Bfrtip',
            data: dataGArray,
            columns: columnRef, // 传入提前生成的列配置
            scrollX: true,
            autoWidth: false, // 关闭自动宽度计算
            drawCallback: function () {
                // 每次重绘后调整列宽
                this.api().columns.adjust();
            },
            buttons: [
                'copy', 'csv', 'excel', 'pdf'
            ]
        });
    } else {
        let table = $('#mapattr').DataTable();
        table.destroy();
        // 不要清空整个table，只清空内容
        $("#mapattr thead").empty();
        $("#mapattr tbody").empty();
        $("#mapattr").DataTable({
            dom: 'Bfrtip',
            data: dataGArray,
            columns: columnRef,
            scrollX: true,
            autoWidth: false,
            drawCallback: function () {
                this.api().columns.adjust();
            },
            buttons: [
                'copy', 'csv', 'excel', 'pdf'
            ]
        });
    }
});
</script>

如果还是有偶发的滚动失效，可以在模态框完全展示后再初始化DataTable，绑定模态框的shown.bs.modal事件，在回调里执行初始化逻辑即可，确保模态框宽度已经渲染完成后再计算表格尺寸。

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