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