如何从重新排序后的DataTables.js行中获取列值并提交表单

这需求我之前做过类似的，用DataTables的RowReorder插件完全能搞定，而且实现起来挺顺畅的。下面给你一步步说具体怎么做：

1. 准备依赖 #

首先得引入DataTables核心库和RowReorder插件（官方官方扩展，专门用来做行拖拽排序），还有jQuery（DataTables依赖它）。

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<!-- DataTables RowReorder CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.3.3/css/rowReorder.dataTables.min.css">
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<!-- DataTables RowReorder JS -->
<script src="https://cdn.datatables.net/rowreorder/1.3.3/js/dataTables.rowReorder.min.js"></script>

2. HTML结构 #

需要一个可拖拽的表格，再加一个隐藏的表单输入框——用来存储排序后的指定列数组，提交表单时会一起发送给后端。

<form id="sortForm" method="POST" action="/submit">
  <table id="sortableTable" class="display">
    <thead>
      <tr>
        <th>ID</th>
        <th>数值</th>
        <th>描述</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>100</td>
        <td>数值A</td>
      </tr>
      <tr>
        <td>2</td>
        <td>200</td>
        <td>数值B</td>
      </tr>
      <tr>
        <td>3</td>
        <td>300</td>
        <td>数值C</td>
      </tr>
    </tbody>
  </table>
  <!-- 隐藏字段存储排序后的数值数组 -->
  <input type="hidden" id="sortedValues" name="sortedValues">
  <button type="submit">提交排序结果</button>
</form>

3. 初始化DataTables并配置拖拽排序 #

初始化表格时开启RowReorder，同时监听排序完成的事件，实时更新隐藏字段的数组值。

$(document).ready(function() {
  const table = $('#sortableTable').DataTable({
    // 开启行拖拽排序
    rowReorder: {
      // 指定拖拽手柄的列（这里用第一列ID作为拖拽区，设为false可整行拖拽）
      selector: 'td:first-child',
      // 排序时同步更新表格数据的顺序
      update: true
    },
    // 关闭默认的点击表头排序（如果不需要的话）
    ordering: false
  });

  // 监听行排序完成事件，实时更新隐藏字段
  table.on('row-reorder', function(e, diff, edit) {
    // 提取第二列（索引从0开始，对应数值列）的所有值，组成数组
    const sortedValues = table.rows().data().map(row => row[1]).toArray();
    // 把数组转成JSON字符串存入隐藏字段
    $('#sortedValues').val(JSON.stringify(sortedValues));
  });

  // 页面加载完成后，先初始化一次隐藏字段的初始值
  const initialValues = table.rows().data().map(row => row[1]).toArray();
  $('#sortedValues').val(JSON.stringify(initialValues));
});

4. 表单提交与后续使用 #

用户提交表单后，后端会收到sortedValues参数，它是一个JSON格式的数组（比如["200","100","300"]）。后续展示结果表格时，你可以根据这个数组的顺序来排序结果数据：比如把结果数据的数值和数组做匹配，按照数组的顺序重新排列结果集，就能完全实现用户自定义的排序逻辑了。

几个实用注意点 #

• 如果表格数据是异步加载的（比如Ajax请求），记得在数据加载完成后（比如draw.dt事件里）重新更新隐藏字段的值。
• 要是不需要RowReorder自动修改表格数据的顺序，可以把update设为false，只监听排序事件提取数据就行。
• 如果要提取的是ID而非数值，只需要把row[1]改成row[0]（对应第一列ID），灵活调整列索引即可。

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