如何将html表行传递到DataTable.net fnAddData

Question

我正在使用DataTable.net插件,我想知道如何动态地向现有表添加行？

http://datatables.net/examples/api/add_row.html

我正在看这个例子,他们就是这样的

/* Global variable for the DataTables object */
var oTable;

/* Global var for counter */
var giCount = 2;

$(document).ready(function() {
    oTable = $('#example').dataTable();
} );

function fnClickAddRow() {
    oTable.fnAddData( [
        giCount+".1",
        giCount+".2",
        giCount+".3",
        giCount+".4" ] );

    giCount++;
}

但我想知道如果我想要一个表格行已经呈现会发生什么？

说这是我的桌子.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table> 

现在我有了这个

var newRow = '<tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>';

如何通过addRow添加它？

我试过 oTable.fnAddData(newRow);但似乎没有用.

所以我不知道该怎么做.

Answer 1

解决简单:

var newRow = "<tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>";
var table = $('table').DataTable();
table.row.add($(newRow )).draw();

Answer 2

如果仍有此问题,请查看DataTables插件fnAddTr.

我认为它可以解决你的问题.

Answer 3

fnAddData使用要添加的值的数组调用,如下所示:

oTable.fnAddData(["row 3, cell 1", "row 3, cell 2"]);

从@froilanq描述的版本1.10使用row.add()方法

你可以在这里阅读API的更多细节,这里是它所需要的参数:

1. 数组字符串:要添加到表中的数据.此数组的长度必须与原始HTML表中的列数相同.
   或
   数组数组字符串:要添加到表中的2D数据数组.内部数组的长度必须与原始HTML表中的列数相同.
2. boolean:可选 - 在添加新数据后重绘表格(默认为true)

Answer 4

jQuery DataTables 1.10允许您在不需要插件的情况下本地执行此操作.抓住最新的开发分支:https://github.com/DataTables/DataTables/tree/1_10_wip/media/js

以下是一些如何使用它的示例代码:

$(document).ready(function() {
  var t1 = $('#t1').DataTable();
  var t2 = $('#t2').DataTable();

  $('#t1 tbody').on( 'click', 'tr', function () {
    t1.row( this ).remove().draw();
    t2.row.add( this ).draw();
  } );

  $('#t2 tbody').on( 'click', 'tr', function () {
    t2.row( this ).remove().draw();
    t1.row.add( this ).draw();
  } );
} );

参考:http://www.datatables.net/forums/discussion/comment/52595#Comment_52595

更多信息

注意上面的调用是DataTable()而不是dataTable().如果您的对象是dataTable(),则按如下方式访问它:

t1 = $('#t1').dataTable();
t1.DataTable().row.add(this).draw();

Answer 5

var dataTable = $('.table').DataTable();

// get the html table rows then
dataTable.destroy();

$("tbody").empty().promise().done(function(){
    $("tbody").html(data);
    dataTable = $(".table").DataTable();
});

如果您希望在表分区中使用内联css或额外的html标签，则希望应用整个html行，则此方法有效。