Datatables Checkboxes结合Sortable拖拽后选中行返回顺序不同步问题

这个问题本质是两个插件的状态层完全隔离，没有做同步导致的：

• jQuery Sortable 拖拽排序只修改DOM节点的物理位置，不会主动通知DataTables更新内部存储的行数据顺序。
• DataTables Checkboxes扩展的selected()方法是从DataTables自身维护的内存缓存里读取选中值，这个缓存的行顺序默认和初始加载顺序一致，完全感知不到DOM层面的顺序变动，所以无论怎么拖拽行，返回的选中ID顺序都不会变化。

不需要修改两个插件的底层源码，核心思路是选中值的读取顺序以当前页面实际渲染的DOM行顺序为准，不要直接依赖Checkboxes扩展返回的集合顺序。

你的配置里已经设置了selectAllPages: false，选中状态只会保存在当前页渲染的DOM节点上，直接遍历DOM不会出现跨页数据遗漏问题。

步骤1：替换提交时的取值逻辑 #

把原来调用checkboxes.selected()遍历的逻辑，改成按DOM顺序逐行判断选中状态、收集ID：

$('#get-selected').click(function(event) {
  const form = $('#questions-form');
  form.find('.questions-postfields').remove();

  // 严格按照当前表格DOM展示的行顺序遍历
  $('#questions-pool tbody tr').each(function() {
    const $currentRow = $(this);
    // 匹配复选框所在列的选中状态，示例里复选框在第4列（索引为3）
    const $checkbox = $currentRow.find('td:eq(3) input[type="checkbox"]');
    if ($checkbox.prop('checked')) {
      // 读取当前行对应的题目ID，示例里ID存储在第3列（索引为2），可根据自己的列配置调整索引
      const questionId = questions.row($currentRow).data()[2];
      form.append(
        $('<input>')
          .attr('type', 'hidden')
          .attr('name', 'questions[]')
          .attr('class', 'questions-postfields')
          .val(questionId)
      );
    }
  });
});

步骤2（可选）：拖拽后同步DataTables缓存 #

如果项目里其他地方也需要调用DataTables的API获取行数据，可以给Sortable加update回调，拖拽结束后主动把DOM顺序同步到DataTables内存缓存，避免其他场景出现顺序不一致问题：

$('#questions-pool tbody').sortable({
  connectWith: '#questions-pool tbody',
  handle: 'td.move-handle',
  update: function() {
    // 以当前DOM顺序为准更新行缓存，draw(false)表示重绘时保持当前分页位置不跳转
    questions.rows().invalidate('dom').draw(false);
  }
});

加完这个回调后，就算你继续用questions.column(3).checkboxes.selected()方法，返回的顺序也会和拖拽后的展示顺序一致。

内容的提问来源于stack exchange，提问作者Faye D.