jQuery 如何将 html 表行传递到 DataTable.net fnAddData
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2845069/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I pass a html table row into DataTable.net fnAddData
提问by chobo2
I am using the DataTable.net plugin and I am wondering how can I add dynamically a row to a existing table?
我正在使用 DataTable.net 插件，我想知道如何将行动态添加到现有表中？
http://datatables.net/examples/api/add_row.html
http://datatables.net/examples/api/add_row.html
I am looking at this example and they have it like this
我正在看这个例子，他们有这样的
/* 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++;
}
but I am wondering what happens if I want I have a table row already rendered?
但我想知道如果我想要一个已经呈现的表格行会发生什么？
Say this is my 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>
Now I have this
现在我有这个
var newRow = '<tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>';
How can I add it through addRow?
如何通过 addRow 添加它？
I tried oTable.fnAddData(newRow);but that seems not to work.
我试过了， oTable.fnAddData(newRow);但这似乎不起作用。
So I am not sure how to do this.
所以我不知道该怎么做。
采纳答案by Nick Craver
Call the fnAddDatawith an array of the values you want to add, like this:
fnAddData使用要添加的值的数组调用，如下所示：
oTable.fnAddData(["row 3, cell 1", "row 3, cell 2"]);
From version 1.10use row.add()method described by @froilanq
来自@froilanq描述的版本1.10使用row.add()方法
You can read more details from the API here, here's the arguments it takes:
您可以在此处从 API 中阅读更多详细信息，这是它需要的参数：
- array strings: The data to be added to the table. This array must be of the same length as the number of columns on the original HTML table.
or
array array strings: 2D array of data to be added to the table. The inner array must be of the same length as the number of columns on the original HTML table.- boolean: optional - redraw the table or not after adding the new data (default true)
- 数组字符串：要添加到表中的数据。该数组的长度必须与原始 HTML 表中的列数相同。
或
数组数组字符串：要添加到表中的二维数据数组。内部数组的长度必须与原始 HTML 表中的列数相同。- boolean: 可选 - 添加新数据后是否重绘表格（默认为真）
回答by froilanq
Solved simple:
解决简单：
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();
回答by Beno?t
回答by Brad
jQuery DataTables 1.10 allows you to do this natively without the need for a plugin. Grab the most recent development branch here: https://github.com/DataTables/DataTables/tree/1_10_wip/media/js
jQuery DataTables 1.10 允许您在本机上执行此操作，而无需插件。在此处获取最新的开发分支：https: //github.com/DataTables/DataTables/tree/1_10_wip/media/js
Here is some sample code on how to use it:
下面是一些关于如何使用它的示例代码：
$(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();
} );
} );
Reference: http://www.datatables.net/forums/discussion/comment/52595#Comment_52595
参考：http: //www.datatables.net/forums/discussion/comment/52595#Comment_52595
More Info
更多信息
Note the call above is to DataTable() and not dataTable(). If your object is dataTable() access it as follows:
请注意，上面的调用是对 DataTable() 而不是 dataTable() 的调用。如果您的对象是 dataTable()，请按如下方式访问它：
t1 = $('#t1').dataTable();
t1.DataTable().row.add(this).draw();
回答by Jaylord Ferrer
var dataTable = $('.table').DataTable(); // get the html table rows then dataTable.destroy(); $("tbody").empty().promise().done(function(){ $("tbody").html(data); dataTable = $(".table").DataTable(); });
var dataTable = $('.table').DataTable(); // get the html table rows then dataTable.destroy(); $("tbody").empty().promise().done(function(){ $("tbody").html(data); dataTable = $(".table").DataTable(); });
This works if you want to apply the whole html row if you have like inline css or extra html tags inside the table divisions.
如果您想应用整个 html 行，如果您在表格分区中有内联 css 或额外的 html 标签，这将起作用。
回答by HamidReza
hi my friends: this code worked well for me.
嗨，我的朋友们：这段代码对我来说效果很好。
var oTable = $('#datatable').dataTable();
var api = oTable.api(true);
var newRow = {
colName1: '',
colName2: 0,
colName3: 0,
colName4: 0
};
api.row.add(newRow).draw();
good luck.
祝你好运。
回答by C Hardy
To add multiple rows from JSON file using MVC.
使用 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);
});
}
});
}
