CODEWITHSUNDEEP
angularjsdatatables
João Paulo
João Paulo

Reputation: 6690

Angular datatables - add row in a dynamic column table

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>

Upvotes: 0

Views: 3143

Answers (1)

Adrian Bratu
Adrian Bratu

Reputation: 508

Please try the following after injecting $timeout.

    $timeout(function(){

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

Upvotes: 1

Related Questions