DataTables垂直状态保存正常，横向滚动状态无法保存，如何实现ScrollX的stateSave？

我来帮你搞定这个横向滚动状态保存的问题！DataTables默认的stateSave功能确实不会自动保存横向滚动条的位置，不过我们可以通过自定义状态保存和加载的回调函数来手动实现这个功能。

核心思路 #

我们需要在保存状态时把横向滚动的偏移量（scrollLeft）加入到保存的状态数据中，然后在加载状态时从保存的数据里取出这个值，再设置给表格的滚动容器。

修改后的完整代码 #

下面是结合你现有代码修改后的版本，关键是添加stateSaveCallback、stateLoadCallback和stateLoadComplete这三个配置项：

$(document).ready(function() {
  var table = $('#example').removeAttr('width').DataTable({
    "ordering": false,
    "searching": false,
    scrollY: '64vh',
    deferRender: true,
    "bInfo": false,
    scroller: true,
    scrollX: true,
    stateSave: true,
    "dom": '<"toolbar">frtip',
    "columnDefs": [
      {"className": "dt-center", "targets": "_all"} // 补全你原来的columnDefs内容
    ],
    // 自定义状态保存回调：添加横向滚动位置
    stateSaveCallback: function(settings, data) {
      // 获取表格的横向滚动容器（DataTables的scrollX容器是.dataTables_scrollBody）
      var scrollXPos = $('.dataTables_scrollBody').scrollLeft();
      // 把滚动位置加入到要保存的状态数据中
      data.scrollXPos = scrollXPos;
      // 用localStorage保存状态（和默认行为一致）
      localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) );
    },
    // 自定义状态加载回调：取出保存的滚动位置
    stateLoadCallback: function(settings) {
      var data = JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) );
      return data;
    },
    // 状态加载完成后，恢复横向滚动位置
    stateLoadComplete: function(settings, data) {
      // 确保表格渲染完成后再设置滚动位置
      setTimeout(function() {
        if (data.scrollXPos !== undefined) {
          $('.dataTables_scrollBody').scrollLeft(data.scrollXPos);
        }
      }, 100);
    }
  });
});

关键细节说明 #

• stateSaveCallback：在保存状态时，我们获取.dataTables_scrollBody（DataTables横向滚动的容器元素）的scrollLeft值，把它添加到要保存的data对象里，再用localStorage存起来。
• stateLoadCallback：这里只是沿用了默认的localStorage读取逻辑，确保我们能拿到包含滚动位置的状态数据。
• stateLoadComplete：因为表格渲染可能有延迟，所以用setTimeout稍微延迟一下，再把保存的scrollXPos设置给滚动容器，确保能正确生效。

测试注意事项 #

• 确保浏览器允许localStorage（大部分现代浏览器默认都允许）。
• 测试时可以横向滚动表格，刷新页面，看看滚动位置是否能恢复。

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