如何利用jQuery/JS实现可见与同列隐藏Datatable的排序同步？

没问题，这个需求其实很容易实现，核心就是利用DataTables自带的事件监听和排序API来同步两个表格的排序状态。下面给你一步步讲具体怎么做：

1. 初始化两个DataTables实例 #

首先确保你已经正确初始化了可见和隐藏的两个表格，并且它们的列配置完全一致。示例代码如下：

// 初始化可见表格，#visible-table是你的可见表格ID
const visibleTable = $('#visible-table').DataTable({
  columns: [
    // 列配置，两个表格要完全一致
    { data: 'id' },
    { data: 'name' },
    { data: 'age' }
    // 其他列配置...
  ],
  // 你的其他配置，比如分页、搜索等
});

// 初始化隐藏表格，#hidden-table是隐藏表格ID，可通过CSS设置display:none隐藏
const hiddenTable = $('#hidden-table').DataTable({
  columns: [
    // 和可见表格完全相同的列配置
    { data: 'id' },
    { data: 'name' },
    { data: 'age' }
    // 其他列配置...
  ],
  ordering: true, // 必须启用排序，才能调用order方法同步规则
  searching: false, // 隐藏表格无需搜索，可选关闭
  paging: false, // 隐藏表格无需分页，可选关闭
  info: false // 隐藏表格无需信息栏，可选关闭
});

2. 监听可见表格的排序事件并同步 #

DataTables提供了order.dt事件，当表格排序状态变化时会触发这个事件。我们可以在回调里获取当前排序规则，再应用到隐藏表格上：

// 监听可见表格的排序事件
visibleTable.on('order.dt', function() {
  // 获取当前可见表格的排序规则，返回二维数组，比如[[0, 'asc']]代表第0列升序
  const currentSortOrder = visibleTable.order();
  
  // 将排序规则应用到隐藏表格，调用draw()更新状态
  hiddenTable.order(currentSortOrder).draw();
});

3. 初始化时同步一次排序状态 #

如果你的可见表格有默认排序配置，别忘了在初始化完成后给隐藏表格同步一次初始排序：

// 初始化完成后同步初始排序规则
hiddenTable.order(visibleTable.order()).draw();

• 必须保证两个表格的列结构完全一致（列顺序、数量、配置），否则排序的列索引会对应错位，导致同步失败。
• 隐藏表格的ordering配置一定要设为true，否则DataTables会禁用排序相关API，无法同步规则。
• 如果你的表格是服务器端处理（serverSide: true），上述客户端同步方法不适用，需要在服务器端统一处理排序逻辑，或者在可见表格排序时将参数传递给隐藏表格的服务器请求。不过从你的描述来看，客户端场景用上面的方法完全够用。

这样就能实现每次对可见表格排序时，隐藏表格自动同步相同的排序规则了~

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