如何实现DataTable行拖拽功能并维护序号列的顺序？

问题说明 #

我正在制作一个主题为“排序选项”的问卷，目前通过addRow方法添加选项，希望为DataTable表格行添加拖拽事件，同时维护序号列的顺序，但不知如何实现。以下是我的代码：

原JavaScript代码 #

$(document).ready(function () {

  var table = $('#ADDchoicesARTableListSequence').DataTable();

  const btnAdd = document.querySelector("#addSequenceBtn");
  const inputChoices = document.querySelector("#sequenceChoices");
  var count = 1;
  btnAdd.addEventListener("click", function () {
    table.row.add([count,inputChoices.value.trim(),'DELETE']).draw();
    count += 1;
    inputChoices.value = '';
  })

});

原HTML代码 #

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.css" />

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.js"></script>

<div class="__Sequence">
  <label>排序选项</label>
  <input type="text" class="__choicesAddARSeq" id="sequenceChoices"/>
  <button id="addSequenceBtn">ADD</button>
</div>

<table class="table text-center table-bordered table-striped dataTable dtr-inline" id="ADDchoicesARTableListSequence">
  <thead>
    <tr>
      <th>No.</th>
      <th>选项内容</th>
      <th>操作</th>
    </tr>
  </thead>
</table>

<button id="addSequenceBtn">创建问题</button>

解决方案 #

要实现行拖拽并同步更新序号，需要借助DataTables的RowReorder插件，具体步骤如下：

1. 引入RowReorder相关资源 #

在原有的CSS和JS引入后，添加RowReorder的样式和脚本：

<!-- RowReorder样式 -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.3.1/css/rowReorder.bootstrap5.css" />
<!-- RowReorder脚本 -->
<script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.3.1/js/dataTables.rowReorder.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.3.1/js/rowReorder.bootstrap5.js"></script>

2. 修改DataTables初始化配置 #

启用RowReorder，并设置拖拽的目标列，同时动态渲染序号（不再依赖固定的count变量）：

$(document).ready(function () {
  var table = $('#ADDchoicesARTableListSequence').DataTable({
    rowReorder: {
      selector: 'tr', // 设置拖拽触发元素为整行
      update: false // 禁止插件自动更新数据，手动处理序号
    },
    columnDefs: [
      { 
        targets: 0, // 序号列
        render: function(data, type, row, meta) {
          return meta.row + 1; // 根据行的索引动态生成序号
        }
      }
    ]
  });

  // 监听拖拽结束事件，重新绘制表格更新序号
  table.on('row-reorder', function() {
    table.draw(false); // 保持当前分页和滚动位置
  });

  // 添加选项功能
  const btnAdd = document.querySelector("#addSequenceBtn");
  const inputChoices = document.querySelector("#sequenceChoices");
  btnAdd.addEventListener("click", function () {
    if (!inputChoices.value.trim()) return; // 空内容不添加
    // 序号列留空，由render函数自动生成
    table.row.add(['', inputChoices.value.trim(), '<button class="btn-delete">删除</button>']).draw();
    inputChoices.value = '';
  });

  // 删除行功能
  $('#ADDchoicesARTableListSequence').on('click', '.btn-delete', function() {
    table.row($(this).closest('tr')).remove().draw();
  });
});

3. 调整HTML细节 #

原HTML中有两个相同id="addSequenceBtn"的按钮，会导致事件绑定异常，需修改其中一个的id，比如把“创建问题”按钮的id改为createQuestionBtn：

<button id="createQuestionBtn">创建问题</button>

关键说明 #

• 动态序号：通过render函数利用行的索引生成序号，不管行如何拖拽或删除，序号都会自动保持连续。
• 拖拽控制：rowReorder配置中设置update: false，避免插件修改数据，通过row-reorder事件触发表格重绘来更新序号。
• 删除功能：给删除按钮绑定事件，点击时移除对应行并重新绘制表格，序号会自动调整。

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