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

Question

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

DataTables 1.10.12
jQuery v3.1.1

What is going wrong here?

I have to re-look at it, I have just edited my previous comment — Franco
– Franco, Commented Oct 6, 2016 at 20:37
No, the number of rows isn't fixed - the number of columns are which is 2. So, each object within the array has two key-value pairs pertaining to each column - right? — kaizer1v
– kaizer1v, Commented Oct 6, 2016 at 20:41
I know I have re-edited the comment. Can You please try to set an other value inside the first row i.p.o. 0. This is a strange issue. — Franco
– Franco, Commented Oct 6, 2016 at 20:43
I normally do this with ajax and a php server-side script. I never had such a issue — Franco
– Franco, Commented Oct 6, 2016 at 20:45

Niyas · Accepted Answer · 2016-10-07 04:59:09Z

2

You need to specify the columns.

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

answered Oct 7, 2016 at 4:59

Niyas

5153 gold badges6 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

fixxxer · Accepted Answer · 2016-10-07 00:47:27Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related