So fügen Sie mehrere Zeilen in Datentabellen hinzu jquery

Question

Ich habe https://datatables.net/reference/api/rows.add%28%29 Link funktioniert verwendet, aber die Daten zeigen die Tabelle als [object,object]. Wie man das Objekt zur Zeichenkette zeigt. Ich habe JSON.stringify(obj) verwendet es funktioniert auch nicht.

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

habe ich zwei Proben in diesem FIDDLE.

Wenn Sie Objekte verwenden möchten, in Zeilen hinzufügen Sie Spalten in der Datentabelle init hinzufügen sollte:

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"}] 
}); 

aber wenn Sie dies nicht tun möchten, können Sie als nächstes verwenden Syntax in Zeilen hinzufügen:

JS

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

Look fiddle es ist informativer.

Answer 2

Ich stieß auch auf dieses Problem - ich fand die Dokumentation weniger als klar. Ihr Beispiel auf https://datatables.net/reference/api/rows.add() funktioniert nicht, wenn ich mein eigenes dynamisch erstelltes Array von Objekten übergebe.

Damit es funktioniert, müssen Sie beim Instantiieren von DataTables die Spaltennamen angeben.

In jedem Fall ist das unten eine funktionierende Lösung.

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

Versuchen Sie, diese `

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

// intialize Datentabelle

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

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