DataTables关闭autoWidth后分页/排序时列宽跳动如何固定首次加载列宽

前置配置 #

首先确认你的表格DOM已经添加table-layout: fixed样式，该属性会禁用浏览器默认的表格列宽自动计算逻辑，是后续固定宽度的基础：

#你的表格ID {
  table-layout: fixed;
  /* 可选：内容过长自动换行，避免溢出 */
  word-wrap: break-word;
}

核心实现逻辑 #

不要在drawCallback中执行宽度调整，该回调每次分页、排序重绘都会触发，会导致宽度反复变动。你需要在仅触发一次的initComplete回调（表格首次初始化、数据加载完成后触发）中计算每列最大宽度并固定。

如果你仅需要部分列自适应后固定宽度，遍历列时增加索引判断，仅处理指定列即可：

api.columns().every(function (index) {
  // 示例：仅处理索引为0、2、3的列，其余列保留原有配置
  if ([0,2,3].includes(index)) {
    // 后续计算宽度、设置宽度的逻辑
  }
})

客户端分页场景（一次性加载全量数据） #

该场景下可以拿到所有分页的内容，直接计算全量数据的最大列宽即可，初始化配置参考：

const dataTable = $('#yourTable').DataTable({
  ajax: {
    url: "你的JSON接口地址",
    dataSrc: "数据对应字段，根节点直接返回数组可填''"
  },
  autoWidth: false,
  serverSide: false, // 客户端分页标记
  columns: [
    {data: "字段1"},
    {data: "字段2"},
    // 其余列配置
  ],
  initComplete: function (settings, json) {
    const api = new $.fn.dataTable.Api(settings);
    // 遍历每一列计算最大宽度
    api.columns().every(function (index) {
      let maxWidth = 0;
      // 遍历该列所有行的单元格（包含非当前分页的行）
      this.nodes().to$().each(function () {
        const currentWidth = $(this).outerWidth();
        if (currentWidth > maxWidth) maxWidth = currentWidth;
      });
      // 给列头固定宽度
      $(api.column(index).header()).css({
        "width": maxWidth + "px",
        "min-width": maxWidth + "px"
      });
      // 给该列所有单元格固定宽度
      this.nodes().to$().css({
        "width": maxWidth + "px",
        "min-width": maxWidth + "px"
      });
    });
    api.columns.adjust();
  }
});

服务端分页场景（每次切换分页仅拉取当前页数据） #

该场景下无法拿到全量数据，可选择首次加载后固定第一页计算出的列宽，后续操作不再调整，仅需要把上面遍历节点的逻辑修改为只读取当前页节点即可：

// 仅修改遍历逻辑，其余配置不变
this.nodes({page: 'current'}).to$().each(function () {
  const currentWidth = $(this).outerWidth();
  if (currentWidth > maxWidth) maxWidth = currentWidth;
});

如果需要适配全量数据的最大宽度，可以让后端接口返回每列内容的最长字符数，前端根据字符数提前计算宽度直接设置即可。

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