添加含[data-]属性的原始HTML行后，如何更新DataTables？

嘿，我来帮你搞定这个问题！你已经用HTML字符串构建了带[data-]属性的行，现在只需要正确获取目标表格的DataTables实例，再用API方法添加并更新视图就行，步骤很清晰：

关键步骤说明 #

1. 获取目标表格的DataTables API实例：全局初始化后，你需要针对要修改的特定表格拿到它的API对象（别再用全局的.dataTable选择器啦，精准定位更靠谱）。
2. 用row.add()插入HTML行：DataTables的row.add()方法支持直接传入HTML字符串，会自动解析其中的data-属性和类名，完全适配你的需求。
3. 调用draw()更新表格视图：添加行后必须调用这个方法，表格才会渲染出新行；如果想保持当前分页位置不跳转（比如用户在第3页添加行，不想跳回第1页），用draw(false)会更友好。

完整代码示例 #

假设你的目标表格有一个唯一ID（比如bm-table，用ID比类选择器更精准），改造后的代码如下：

// 1. 获取目标表格的DataTables实例
let targetTable = $('#bm-table').DataTable();

// 2. 构建你的自定义HTML行（和你原来的逻辑一致）
let dataRow = '<tr data-bmid="' + j.id + '">';
dataRow += '<td class="bmtitle">' + j.title + '</td>';
dataRow += '<td>这里是其他单元格内容</td>';
dataRow += '</tr>';

// 3. 添加行并更新表格（draw(false)保持当前分页位置）
targetTable.row.add(dataRow).draw(false);

额外注意事项 #

• 避免重复初始化：如果已经全局调用过$('.dataTable').DataTable(options)，直接用DataTable()获取实例就行，不要再次调用初始化方法，否则会触发报错。
• 保持结构一致性：确保新行的HTML结构和表格原有行完全匹配（列数、单元格嵌套结构等），不然可能出现列对齐异常或渲染错误。
• 操作新行（可选）：如果需要在添加后选中或定位新行，可以在draw()之后补充代码，比如：

  // 选中刚添加的最后一行
  targetTable.row(':last').select();
  

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