jquery - 如何从 html 字符串向 jQuery DataTable 添加多行

Question

我有一个 jQuery DataTable，我想向其中添加 html tr 行。这些行以 html 字符串的形式出现。我可以使用标准 jQuery 将它们添加到表中，但这意味着它们绕过 DataTable 对象，并在重新排序表时丢失。要使用 DataTable rows.add() 函数意味着我需要数组格式的行。

// table_rows actually comes from an ajax call. 
var table_rows = '<tr>...</tr><tr>...</tr><tr>...</tr>';

// This successfully adds the rows to the table... :-)
$('#datatable_id').append(table_rows);

// ...but those rows are lost when we redraw the DataTable. :-(
table = $("#datatable_id").DataTable();
table.order([0,'desc']).draw();

不幸的是，我无法轻松更改从服务器返回的内容，所以看来我需要一个客户端解决方案。

Answer 1

您不应直接操作表格并使用适当的 jQuery DataTables API 方法。

您可以使用rows.add()在提供 tr 节点时添加多行的 API 方法。您可以根据服务器响应构造 tr 节点。

例如:

var table_rows = '<tr><td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td><td>61</td><td>2011/04/25</td><td>$320,800</td></tr>';

table.rows.add($(table_rows)).draw();

参见this jsFiddle用于代码和演示。