如何将手动追加行的表格改造为仅支持追加行的DataTable？

以下是改造后的完整代码，解决你参考官网示例无法运行的问题，同时保留原有添加、删除行的功能，并且用上DataTable的优化特性：

完整HTML代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<br><br>
<input type="text" id="choices" placeholder="输入选项内容"/>
<button id="appendChoices">添加选项</button>
<br><br>

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

完整JS代码 #

// 初始化DataTable
const table = $('#ADDchoicesARTableListSequence').DataTable({
  // 配置项：根据需求调整
  columnDefs: [
    { targets: 0, orderable: false }, // 序号列不允许排序
    { targets: 2, orderable: false }  // 操作列不允许排序
  ],
  language: {
    // 中文提示配置，优化用户体验
    search: "搜索:",
    lengthMenu: "显示 _MENU_ 条记录",
    info: "显示第 _START_ 至 _END_ 条记录，共 _TOTAL_ 条",
    paginate: {
      first: "首页",
      last: "末页",
      next: "下一页",
      previous: "上一页"
    }
  }
});

// 获取DOM元素
const btnAdd = $('#appendChoices');
const inputChoices = $('#choices');
let count = 1;

// 添加行按钮事件
btnAdd.on('click', function() {
  const inputVal = inputChoices.val().trim();
  if (!inputVal) return; // 空内容不添加

  // 使用DataTable API添加行
  table.row.add([
    count,
    inputVal,
    '<button class="btn btn-sm btn-danger delete-btn">删除</button>'
  ]).draw(); // draw()方法刷新表格，让新行生效

  count++;
  inputChoices.val('');
});

// 删除行事件（事件委托处理动态生成的按钮）
$('#ADDchoicesARTableListSequence').on('click', '.delete-btn', function() {
  // 获取当前行并删除
  const row = table.row($(this).closest('tr'));
  row.remove().draw();

  // 可选：删除后重新计算序号，保持连续
  table.rows().every(function(index) {
    this.cell(index, 0).data(index + 1);
  });
  table.draw();
});

关键改动说明 #

1. 补充DataTables资源：原代码缺少DataTables的CSS和JS文件，这是官网示例无法运行的核心原因，需搭配Bootstrap适配版本的资源引入。
2. 用DataTable API操作行：不再直接通过jQuery修改DOM，改用row.add()和draw()方法，确保DataTable能识别新行，保留分页、搜索等原生功能。
3. 事件委托处理动态元素：删除按钮是动态生成的，通过父容器绑定事件确保触发有效。
4. 序号列优化：删除行后可重新遍历赋值序号，保持序号连续。
5. 中文语言配置：添加中文提示，让界面更贴合国内用户习惯。

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