如何从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()API方法在提供tr节点时添加多行.您可以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();

有关代码和演示,请参阅此jsFiddle.

Answer 2

如果您要添加多个，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>      \r\n<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>';

在上面的字符串中，标记</tr>和之间有空格。您需要删除这些空格和标签。<tr>\r\n\r\n

obj = obj.replace(/^\s*|\s*$/g, '');
obj = obj.replace(/\\r\\n/gm, '');

var expr = "</tr>\\s*<tr";
var regEx = new RegExp(expr, "gm");
var newRows = obj.replace(regEx, "</tr><tr");                        
myDataTable.rows.add($(newRows)).draw();

上面的代码解决了我的问题。