DataTables页面重载后表头收缩、点击后恢复正常故障求解

DevOps 小满

2026-10-3

异常原因

该问题属于DataTables常见渲染异常，触发原因包括：初始化时页面样式未完全加载、表格父容器宽度未完成计算，或是Bootstrap与原生DataTables样式发生冲突，导致表头宽度计算错误。点击表头时会触发表格自动重绘，所以样式会恢复正常。

修复方案

给表格标签强制设置100%宽度
为<table>标签添加固定宽度样式，避免初始宽度计算偏差：
```
<table id="draft-data-table" style="width:100% !important;">
```

初始化完成后手动触发列宽重计算
在DataTables配置项中添加initComplete回调，调用官方columns.adjust()接口重新适配列宽：

$(document).ready(function () {
    $('#draft-data-table').DataTable({
        processing: true, 
        serverSide: false,
        filter: true,
        orderMulti: false,
        "pagingType": "full_numbers",
        pageLength: 5,
        lengthMenu: [1, 3, 5, 20, 50, 100, 200, 500],
        deferRender: true,
        paging: true,
        scrollY: 200,
        scrollCollapse: true,
        scroller: true,
        // 新增回调配置
        initComplete: function () {
            this.api().columns.adjust();
        }
    });
});

替换适配Bootstrap的DataTables资源
当前同时引入了Bootstrap样式和原生DataTables样式，存在样式冲突风险，可将现有原生DataTables的CSS、JS资源替换为对应版本的Bootstrap适配版资源。
调整初始化触发时机
若以上方案无效，可将表格初始化代码从$(document).ready()中迁移至$(window).on('load', function() { ... })内，等待页面所有静态资源加载完成后再初始化表格，避免样式未加载完成导致的宽度计算错误。