如何在数据表中添加多行 jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24927293/
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 to add multiple rows in datatables jquery
提问by Krishna
I have used https://datatables.net/reference/api/rows.add%28%29link working but the data showing the table as [object,object]. How to show the object to string. i have used JSON.stringify(obj)its also not working.
我已经使用https://datatables.net/reference/api/rows.add%28%29链接工作，但数据显示表为[object,object]. 如何将对象显示为字符串。我用过JSON.stringify(obj)它也不起作用。
HTML
HTML
<table id="exampleTable">
<thead>
<tr>
<th>Year</th>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>2012</td>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>2012</td>
<td>February</td>
<td></td>
</tr>
</table>
JS
JS
$('#addRows').click();
var table3 = $('#exampleTable').DataTable();
$('#addRows').on( 'click', function () {
table3.row.add(
[ { "Year": "Tiger Nixon", "Month": "System Architect", "Savings": ",120" },
{"Year": "Tiger Nixon", "Month": "System Architect", "Savings": ",120" }]
).draw();
});
回答by Baximilian
I created two samples in this FIDDLE.
我在这个FIDDLE 中创建了两个示例。
If you want to use objects in rows add you should add columns in your datatable init:
如果要在行添加中使用对象，则应在数据表初始化中添加列：
JS
JS
var table3 = $('#exampleTable').DataTable({
data:[{ "Year": "2012", "Month": "January", "Savings": "0" },
{ "Year": "2012", "Month": "February", "Savings": "" }],
columns:[{data: 'Year'},
{data: "Month"},
{data: "Savings"}]
});
but if you don't want to do this you can use next syntax in rows add:
但如果你不想这样做，你可以在行中使用下一个语法添加：
JS
JS
table4.rows.add(
[[ "Tiger Nixon", "System Architect",",120" ],
["Tiger Nixon", "System Architect", ",120" ]]
).draw();
Look fiddleit's more informative.
看看小提琴，它的信息量更大。
回答by puiu
I came across this problem too - I found the documentation to be less than clear. Their example on https://datatables.net/reference/api/rows.add()does not work when I pass my own dynamically created array of objects.
我也遇到了这个问题 - 我发现文档不太清楚。当我传递自己动态创建的对象数组时，他们在https://datatables.net/reference/api/rows.add()上的示例不起作用。
In order to get it working, you have to specify the columns' names when instantiating DataTables.
为了让它工作，你必须在实例化数据表时指定列的名称。
In any case, the below is a working solution.
无论如何，以下是一个有效的解决方案。
var DataTable = $('#tableName').DataTable({
iDisplayLength: 15, // number of rows to display
columns: [
{ data: 'id' },
{ data: 'name' },
{ data: 'car' },
]
});
// assume this is a dynamically created array of objects
var persons = [
{
id: 1,
name: 'John',
car: 'Mercedes',
},
{
id: 2,
name: 'Dave',
car: 'BMW',
},
{
id: 3,
name: 'Ken',
car: 'Jeep',
},
];
DataTable.rows.add(persons).draw();
回答by Murali
Try this`
试试这个`
var data = [
{id : 1, name : 'John'},
{id : 2, name : 'Joe'},
{id : 3, name : 'Mathan'},
{id : 4, name : 'Mani'},
{id : 4, name : 'Karthik'}
];
//Intialize data table
//初始化数据表
var DataTable = $('#tableName').DataTable({
iDisplayLength: 15,
columns: [
{ data: 'id' },
{ data: 'name' },
]
});
DataTable.rows.add(data).draw();
回答by Veer Jangid
I am returning a view as in a foreach loop, it returning multiple rows.now i ll append in datatable with all functionilities working of datatable.
我正在返回一个视图，就像在 foreach 循环中一样，它返回多行。现在我将在数据表中附加数据表的所有功能。
it work only when you are getting data in html format and only format of multiple rows.
它仅在您以 html 格式获取数据且仅以多行格式获取数据时才有效。
this is my datatable
这是我的数据表
$('#SurveyDetails').dataTable({
"scrollY": "500px",
"scrollX": true,
"scrollCollapse": true,
"paging": false,
"jQueryUI": false,
"searching": false,
"autoWidth": false,
});
i am appending 30 rows on scroll of datatable.
我在数据表的滚动上附加 30 行。
on sucess of ajax :
关于 ajax 的成功：
success: function (data) {
if (!$.trim(data) == '') {
data = data.replace(/^\s*|\s*$/g, '');
data = data.replace(/\r\n/gm, '');
var expr = "</tr>\s*<tr";
var regEx = new RegExp(expr, "gm");
var newRows = data.replace(regEx, "</tr><tr");
$("#SurveyDetails").DataTable().rows.add($(newRows)).draw();
}
