如何在数据表中添加多行jquery

Question

我已经使用https://datatables.net/reference/api/rows.add%28%29链接工作，但数据显示表格为[object,object]。如何将对象显示为字符串。我已经使用JSON.stringify(obj)它也没有工作。

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>$100</td> 
    </tr> 
    <tr> 
    <td>2012</td> 
    <td>February</td> 
    <td>$80</td> 
    </tr> 
</table> 

JS

$('#addRows').click(); 

var table3 = $('#exampleTable').DataTable(); 

$('#addRows').on('click', function() { 
    table3.row.add(
     [ { "Year": "Tiger Nixon", "Month": "System Architect", "Savings": "$3,120" }, 
     {"Year": "Tiger Nixon", "Month": "System Architect", "Savings": "$3,120" }] 
    ).draw(); 
}); 

Answer 1

我在这个FIDDLE创建了两个样品。

如果你想在行使用对象添加，你应该在你的数据表中的init添加列：

JS

var table3 = $('#exampleTable').DataTable({ 
    data:[{ "Year": "2012", "Month": "January", "Savings": "$100" }, 
     { "Year": "2012", "Month": "February", "Savings": "$80" }], 
    columns:[{data: 'Year'}, 
     {data: "Month"}, 
     {data: "Savings"}] 
}); 

，但如果你不想这样做，你可以使用next语法行添加：

JS

table4.rows.add(
    [[ "Tiger Nixon", "System Architect","$3,120" ], 
    ["Tiger Nixon", "System Architect", "$3,120" ]] 
).draw(); 

Look fiddle它更具信息性。

Answer 2

我也遇到过这个问题 - 我发现文档不够清晰。当我传递我自己动态创建的对象数组时，他们在https://datatables.net/reference/api/rows.add()上的示例不起作用。

为了使其正常工作，必须在实例化DataTable时指定列的名称。

无论如何，下面是一个工作解决方案。

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

Answer 3

试试这个`

var data = [ 
    {id : 1, name : 'John'}, 
    {id : 2, name : 'Joe'}, 
    {id : 3, name : 'Mathan'}, 
    {id : 4, name : 'Mani'}, 
    {id : 4, name : 'Karthik'} 
]; 

// Intialize数据表

var DataTable = $('#tableName').DataTable({ 
iDisplayLength: 15, 
columns: [ 
{ data: 'id' }, 
{ data: 'name' }, 
] 
}); 

DataTable.rows.add(data).draw();