JavaScript列重排事件调用页面刷新引发无限循环问题求助

问题原因 #

你的代码在column-reorder事件回调里调用了location.reload()，而DataTables默认会将表格状态（包括列顺序）保存到本地存储。当页面刷新时，表格会自动恢复之前调整过的列顺序，这会再次触发column-reorder事件，进而再次执行页面刷新，形成无限循环。首次加载时无此问题，是因为此时还未保存列重排的状态。

解决方案 #

方案一：用状态标记避免重复触发 #

通过会话存储设置标记，在页面刷新前标记状态，加载时检查标记并跳过事件执行，防止循环：

// 页面初始化时检查标记
let isReloading = sessionStorage.getItem('isReloading');
if (isReloading) {
  // 清除标记，避免下次加载受影响
  sessionStorage.removeItem('isReloading');
} else {
  // 仅非刷新触发的加载才绑定事件
  tabelaProdutos.on('column-reorder', function(e, settings, details) {
    // 你的业务逻辑代码...
    // 设置标记后执行刷新
    sessionStorage.setItem('isReloading', 'true');
    location.reload();
  });
}

方案二：禁用表格状态保存 #

如果不需要记住用户调整的列顺序，可以直接关闭DataTables的stateSave配置，刷新后表格回到初始列顺序，不会触发column-reorder事件：

// 初始化表格时添加配置
$('#tabelaProdutos').DataTable({
  stateSave: false,
  // 其他原有配置项...
});

方案三：局部更新替代整页刷新 #

整页刷新并非最优解，建议通过AJAX保存列顺序并局部更新表格数据，彻底避免循环：

tabelaProdutos.on('column-reorder', function(e, settings, details) {
  // 获取调整后的列顺序数组
  const newColumnOrder = details.newOrder;
  
  // 发送请求到后端保存列顺序
  $.ajax({
    url: '/api/save-column-order', // 替换为你的后端接口地址
    method: 'POST',
    data: { columnOrder: newColumnOrder },
    success: function() {
      // 局部刷新表格数据，无需整页重载
      tabelaProdutos.ajax.reload();
    }
  });
});

内容的提问来源于stack exchange，提问作者Cleisson De Oliveira