DataTables-RowReorder无法获取更新行顺序？官方方法失效求助

阿华AIGC实验室

2026-5-14

解决DataTables RowReorder后获取更新行顺序的问题

我之前也踩过这个坑！明明照着官方文档用了rows({ order: 'updated' }).data()，结果拿到的还是原始顺序，真的头疼。后来摸索出几个关键点，帮你解决这个问题：

首先，确认RowReorder的基础配置是否正确

很多时候问题出在插件没正确配置，导致拖拽后表格内部的数据顺序根本没更新。确保你的DataTables初始化代码里包含这些：

const table = $('#your-table-id').DataTable({
  rowReorder: {
    selector: 'td:nth-child(1)', // 指定用户可以拖拽的列（比如第一列）
    update: true // 这个是默认值，但最好显式写上，确保插件自动更新表格的内部顺序
  },
  // 其他表格配置（列定义、数据源等）
});

如果update设为false，插件只会移动DOM元素，不会更新DataTables内部的数据顺序，这时候rows({ order: 'updated' })肯定拿不到新顺序。

正确的时机：在拖拽完成事件里获取数据

官方方法没生效，大概率是你调用的时机不对——比如页面加载完就直接调用，或者拖拽还没完成就执行了。一定要在RowReorder的row-reorder事件回调里获取更新后的数据，这个事件会在拖拽完成、表格顺序更新后触发：

table.on('row-reorder.dt', function(e, diff, edit) {
  // 方法1：用官方推荐的方式，加上order: 'applied'更稳妥
  const updatedData = table.rows({ order: 'applied' }).data();
  // 把结果转成数组方便查看/处理
  console.log('更新后的完整行数据：', updatedData.toArray());

  // 方法2：直接遍历当前DOM顺序的行（适合快速验证）
  const currentOrder = [];
  table.rows().nodes().forEach(node => {
    currentOrder.push(table.row(node).data());
  });
  console.log('按当前页面顺序的行数据：', currentOrder);
});

这里用order: 'applied'而不是updated，是因为applied会确保拿到的是表格当前实际显示的顺序（包括拖拽后的调整），比updated更可靠。

如果是服务器端处理（serverSide: true）

如果你的表格开启了服务器端分页/排序，那DataTables的内部数据顺序是由服务器控制的，这时候rows({ order: 'applied' })可能还是拿不到最新的服务器端顺序。这时候要利用row-reorder事件里的diff参数，它包含了所有被拖拽行的位置变化：

table.on('row-reorder.dt', function(e, diff, edit) {
  // 遍历变化的行，收集需要更新的信息
  const updateRequests = diff.map(item => {
    // 获取行的ID（假设你给<tr>设置了id属性，比如id="row-123"）
    const rowId = table.row(item.node).id().split('-')[1];
    return {
      id: rowId,
      oldPosition: item.oldPosition,
      newPosition: item.newPosition
    };
  });

  // 发送AJAX请求到服务器，更新数据库里的行顺序
  $.ajax({
    url: '/your-api-endpoint/update-order',
    method: 'POST',
    data: { rows: updateRequests },
    success: () => {
      // 重新加载表格数据，确保页面显示最新顺序
      table.ajax.reload();
    }
  });
});

服务器端更新完成后，调用table.ajax.reload()就能拿到最新的行顺序了。