如何在數據表中添加多行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();