Angular datatables - add row in a dynamic column table

Question

I have a datatable table with a variable columns number and I need to add rows to it.

That's how I set the columns:

var columns = getColumnsName();
columns.forEach(function(column, index){
    dtColumns.push(DTColumnBuilder.newColumn(index).withTitle(column));
});

This only works when I don't put a <tr> inside <tbody>. If I put a <tr> inside <tbody>, I got the following error:

TypeError: Cannot read property 'length' of undefined
    at _fnGetRowElements (jquery.dataTables.js:3021)
    at HTMLTableRowElement.<anonymous> (jquery.dataTables.js:2428)
    at jquery.js:144
    at Function.map (jquery.js:467)
    at jQuery.fn.init.map (jquery.js:143)
    at _fnAddTr (jquery.dataTables.js:2427)
    at loadedInit (jquery.dataTables.js:1307)
    at HTMLTableElement.<anonymous> (jquery.dataTables.js:1332)
    at Function.each (jquery.js:374)
    at jQuery.fn.init.each (jquery.js:139)

Note that if I can't put a <tr>, I can't place a ng-repeat to repeat my data inside <tbody>.

I seems that I'm getting the above error when I have a <tr> inside <tbody> without enough <td> inside it. Supposing I know how many columns I have and put this exactly number of <td> inside <tr>, I don't get this error...

How can I add rows to table in this case?

EDIT

As asked, here goes the HTML:

<table dt-options="ctrl.dtOptions" dt-columns="ctrl.dtColumns" dt-column-defs="ctrl.dtColumnDefs" datatable="ng">
    <thead></thead>
    <tbody></tbody>
</table>

Please add your html markup, too. It may help with solving the issue. — DDelgro
– DDelgro, Commented Jan 11, 2017 at 21:04

Adrian Bratu · Accepted Answer · 2017-01-11 20:15:39Z

1

Please try the following after injecting $timeout.

    $timeout(function(){

      var columns = getColumnsName();
      columns.forEach(function(column, index){
         dtColumns.push(DTColumnBuilder.newColumn(index).withTitle(column));
      });
    });

answered Jan 11, 2017 at 20:15

Adrian Bratu

5083 silver badges9 bronze badges

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

1 Comment

João Paulo Over a year ago

Didn't work :( . Got this message: TypeError: Cannot read property 'parentNode' of null.

Collectives™ on Stack Overflow

Angular datatables - add row in a dynamic column table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related