Jak dodać wiele wierszy w jquery zestawów danych

Question

Użyłem działającego łącza https://datatables.net/reference/api/rows.add%28%29, ale dane pokazujące tabelę jako [object,object]. Jak pokazać obiekt do napisu. użyłem JSON.stringify(obj) jego również nie działa.

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

Stworzyłem dwie próbki w tym FIDDLE.

Jeśli chcesz korzystać z obiektów w rzędach dodać należy dodać kolumny w elementu datatable w 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"}] 
}); 

ale jeśli nie chcesz to zrobić można użyć obok składnia w wierszach dodać:

JS

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

Wygląd fiddle jest bardziej pouczający.

Answer 2

Również natknąłem się na ten problem - stwierdziłem, że dokumentacja jest mniej niż jasna. Ich przykład na https://datatables.net/reference/api/rows.add() nie działa, gdy przekazuję własną dynamicznie tworzoną tablicę obiektów.

Aby program działał poprawnie, należy określić nazwy kolumn podczas tworzenia instancji DataTables.

W każdym przypadku poniższe rozwiązanie jest sprawne.

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

Spróbuj `

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

// Intialize tabeli danych

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

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