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

pbpqsu0x  于 2022-11-22  发布在  jQuery
关注(0)|答案(8)|浏览(121)

我正在使用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。

<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);,但似乎不起作用。
所以我不知道该怎么做。

9ceoxa92

9ceoxa921#

简单解决:

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

fquxozlt2#

如果仍然存在此问题,请查看DataTables插件fnAddTr
我觉得它能解决你的问题。

epfja78i

epfja78i3#

使用要添加的值的数组调用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,它的参数如下:
1.数组字符串:要添加到表中的数据。该数组的长度必须与原始HTML表中的列数相同。

数组 * 数组字符串:要添加到表中的数据的二维数组。内部数组的长度必须与原始HTML表中的列数相同。

1.布尔值:可选-添加新数据后是否重绘表格(默认为true)

5m1hhzi4

5m1hhzi44#

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

tyky79it5#

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

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

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

如果你想应用整个html行,并且你有内联css或额外的html标签在表分区内,这是有效的。

2exbekwf

2exbekwf6#

嗨,我的朋友:这段代码对我来说很有效。

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

祝你好运。

vxf3dgd4

vxf3dgd47#

let tr = html.createElement("tr");
tr.innerHTML = '<td>row 3, cell 1</td><td>row 3, cell 2</td>';
oTable = $('#example').dataTable();
oTable.row.add(tr).draw();
3pmvbmvn

3pmvbmvn8#

使用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);
            });
            }
        });

    }

相关问题