Angular Datatable with dynamic columns

Question

I found this very cool Angular Datatable library which adds pagination, search and stuff to the table. I works well with predefined table headers but I need to paginate a table who's headers ain't predefined.

I tried following this example on their official documentation, with a few changes of my own, but it gave me this error:

DataTables warning: table id=DataTables_Table_0 - Ajax error. For more information about this error, please see http://datatables.net/tn/7

This is how I tried it:

in my html file

<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>

in my controller

angular.module("app").controller("uploadDataController", ['$scope', 
   'DTOptionsBuilder', 'DTColumnBuilder',
   function($scope, DTOptionsBuilder, DTColumnBuilder) {
       
          SetupScreen();

          function SetupScreen() {
                $scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
        .withPaginationType('full_numbers');
        $scope.dtColumns =  [
                             DTColumnBuilder.newColumn('id').withTitle('ID'),
                             DTColumnBuilder.newColumn('firstName').withTitle('First name'),
                             DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
                         ];
          }
   }

I'm receiving data from server that can contain any kind of headers so I cannot define the columns.

any ideas?

See this -> http://stackoverflow.com/questions/38788383/how-to-populate-table-dynamically-based-on-data/38793746#38793746 — davidkonrad, Oct 18 '16 at 12:25

score 3 · Answer 1 · edited Nov 15 '16 at 13:14

I think you can use the ng-repeat both for headers and rows data to populate the table .

I Will explain for the data which comes from the server . Change the header also depending on your requirement

By defining The controller this way

angular.module('showcase.angularWay.dataChange', ['datatables', 'ngResource'])
.controller('AngularWayChangeDataCtrl', AngularWayChangeDataCtrl);

By defining the Datatable in this way

$scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withOption('info', false).withOption('bFilter', false).withOption('paging', false);

By defining the columns the following way . This can be as many as columns you need

$scope.dtColumnDefs = [
        DTColumnDefBuilder.newColumnDef(0),
        DTColumnDefBuilder.newColumnDef(1)
      ];

And the HTML code as follows change the data based on your requirement

<table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="row-border hover">
                    <thead>
                        <tr>
                            <th>Form ID</th>
                            <th>Form Description</th>
                            <th>Edit</th>
                        </tr>
                    </thead>
                        <tr ng-repeat="form_elements in View_Forms" >
                            <td>{{ form_elements.form_id }} </td>
                            <td>{{ form_elements.description }} </td>
                            <td ng-click="modify(form_elements.form_id)"><a>Edit</a></td>
                        </tr>
                    </table>

Here only the rows are generated dynamic? how to generate headers dynamically? — Sharath, Aug 18 '17 at 12:29
the following function can be used in columns def to add dynamic column names DTColumnDefBuilder.newColumnDef(0).withOption('title', 'hello') — Nischal Revooru, Aug 22 '17 at 11:23
Ya i have done it!! How it works is, populated Key as columns and Values as row in a datatable from server response as a JSON. @trainoasis — Sharath, Dec 05 '17 at 09:24
@NischalRevooru colud you please share a snippit to achive the same in angular6 inside the ts component file (If it is possible). — Nawaz Khan, Apr 10 '20 at 07:36

Angular Datatable with dynamic columns

1 Answers1