如何通过自定义样式HTML字符串向DataTables添加新行？

问题根源 #

你碰到的错误是因为fnAddData默认会按照表格列配置里的data字段（比如dropdown1）匹配传入的数据结构，但你直接传了整行HTML字符串，DataTables会把这个字符串当成第一列的数据，找不到对应dropdown1的参数，所以触发报错。

正确实现方法 #

方法1：拆分HTML为列片段数组 #

把服务器返回的整行HTML拆成对应每一列的HTML片段，组成数组后传给fnAddData，就能和表格列配置一一对应：

// 假设接口返回的data.HTMLString是完整的<tr>标签内容
const $newRow = $(data.HTMLString);
// 提取每个td的innerHTML，组成对应列的数组
const rowData = $newRow.find('td').map(function() {
    return $(this).html();
}).get();

// 调用fnAddData添加数组形式的行数据
$("#table").dataTable().fnAddData(rowData);

关键注意点 #

• 拆分出来的列数必须和表格实际列数完全一致，包括隐藏列，少一列都会触发参数不匹配错误。
• 服务器返回的HTML必须是标准的<tr><td>...</td>...</tr>结构，这样jQuery才能正确解析提取各列内容。

可选兼容思路 #

如果表格里部分列是纯HTML列，初始化表格时可以给这些列设置data: null，再用render函数处理，但如果必须用服务器生成的整行HTML，上面的拆分方法最贴合你的需求。

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