如何从html字符串向jQuery DataTable添加多行 [英] How to add multiple rows to a jQuery DataTable from a html string

问题描述

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

I have a jQuery DataTable that I'd like to add html tr rows to. These rows come in the form of a html string. I can add these to the table using standard jQuery, but this means they bypass the DataTable object and are lost when the table is resorted. To use the DataTable rows.add() function would mean I'd need the rows in array format.

// 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();

不幸的是，我无法轻易改变从服务器返回的内容，因此我似乎需要一个客户端解决方案。

Unfortunately I can't easilly change what comes back from the server, so it seems I need a client side solution.

推荐答案

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

You should not manipulate the table directly and use appropriate jQuery DataTables API methods.

您可以使用 rows.add（） 在提供 tr 节点时添加多行的API方法。您可以从服务器响应中构造 tr 节点。

You can use rows.add() API method to add multiple rows while supplying tr nodes. You can construct tr nodes from your server response.

例如：

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 代码和演示。

这篇关于如何从html字符串向jQuery DataTable添加多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！