How to add multiple rows in datatables jquery
I created two samples in this FIDDLE.
If you want to use objects in rows add you should add columns in your datatable 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"}]
});
but if you don't want to do this you can use next syntax in rows add:
JS
table4.rows.add(
[[ "Tiger Nixon", "System Architect","$3,120" ],
["Tiger Nixon", "System Architect", "$3,120" ]]
).draw();
Look fiddle it's more informative.
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.
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();