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?

• davidkonrad: See this -> stackoverflow.com/questions/38788383/…
• Tahreem Iqbal: thanks a bunch david.. your code worked.

Answer 1

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>

• Sharath: Here only the rows are generated dynamic? how to generate headers dynamically?
• Nischal Revooru: the following function can be used in columns def to add dynamic column names DTColumnDefBuilder.newColumnDef(0).withOption('title', 'hello')
• Sharath: 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
• Nawaz Khan: @NischalRevooru colud you please share a snippit to achive the same in angular6 inside the ts component file (If it is possible).