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"]);

从版本1.10使用@froilanq

描述的row.add()方法

You can read more details from the API here，这是它需要的论据：

数组字符串：要添加到表中的数据。此数组的长度必须与原始HTML表中的列数相同   或
  数组数组字符串：要添加到表中的2D数据数组。内部数组的长度必须与原始HTML表中的列数相同。

布尔：可选 - 在添加新数据后重绘表格（默认为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行。

Answer 6

嗨我的朋友们：这段代码对我来说效果很好。

var oTable = $('#datatable').dataTable();
var api = oTable.api(true);
var newRow = {
                colName1: '',
                colName2: 0,
                colName3: 0,
                colName4: 0
             };
api.row.add(newRow).draw();

祝你好运。

Answer 7

使用MVC在JSON文件中添加多行。

    function fnClickAddRow(obj) {
        $('#tableID').dataTable().fnAddData([
            obj.column1,
            obj.column2,
            obj.column3,
            obj.column4,
            obj.column5,
            obj.column6,
            obj.column7,
            obj.column8,
            obj.column9,
            obj.column10]);
    }
    function rowAdd() {
        $.ajax({
          type: 'POST',
            url: '@Url.Action("Action", "Controller")',
        success: function (data) {
            $.each(data, function (i, obj) {
                fnClickAddRow(obj);
            });
            }
        });

    }

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

7 个答案: