CODEWITHSUNDEEP
javascriptjqueryhtmldatatable
kaizer1v
kaizer1v

Reputation: 908

Jquery DataTable unable to add rows using table.rows.add method

For some very funny reason, I am unable to add multiple rows to a simple table using dataTables. Here is the thing,

I am adding 4 rows to an html table using datatable, specifically using the table.rows.add method (link).

Below is the simple html code for it with a sample row already present in it.

<table id="items-table" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th>ID</th>
      <th>Item Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0</td>
      <td>Sample Object</td>
    </tr>
  </tbody>
</table>

And here is the javascript code for it.

// create a dataTable
var itemsTable = $("#items-table").DataTable({
  paging: false,
  searching: false
});

// add data as rows. Make sure to call the ```.draw``` method.
itemsTable.rows.add([{
    "id": "1",
    "item": "Aardvark"
  }, {
    "id": "2",
    "item": "Red Bull"
  }, {
    "id": "3",
    "item": "Jack in the Box"
  }, {
    "id": "4",
    "item": "Chair"
}]).draw();

Error says:

DataTable warning: table id=items-table -Requested unknown parameter '0' for row 1, column 0. For more information see this error.

Using

What is going wrong here?

Upvotes: 1

Views: 928

Answers (2)

Niyas
Niyas

Reputation: 515

You need to specify the columns.

// create a dataTable
var itemsTable = $("#items-table").DataTable({
                  paging: false,
                  searching: false,
                  columns: [{data: 'id'}, {data: 'item'}]
                  });

Upvotes: 2

fixxxer
fixxxer

Reputation: 16134

One workaround is to put all the data in a regular table and then initialize it as a dataTable, instead of adding individual rows.

You may want to add "fnDrawCallback": function in your Datatable initialization if you are using underscore.js templates or similar, and use function to bind events to rows after the table is redrawn. Another possible way to do this would be to use, order.dt or search.dt or page.dt events provided by Datatables to do this. Possibly like: 

function bind_feedback_behavior(){
  $('table.program-status')
    .on( 'order.dt',  function () { enable_feedback_behavior(); } )
    .on( 'search.dt', function () { enable_feedback_behavior(); } )
    .on( 'page.dt',   function () { enable_feedback_behavior(); } );
}

Upvotes: 1

Related Questions