Disable column sorting not working for multiple angularjs datatables

Question

I am working with multiple angularjs data tables and generating a new table every time user selects an option from the drop down list.Based on the user\'s selection i make an $h

Answer 1

OK. Dont know where to start, but you a had broad range of errors in your code (no offense).

• Never declared x
• Never actually used x
• Never actually used dtColumnDefs

And more...After some debugging the overall setup did work. However, your biggest problem was the mix of ng-repeat combined with the datatable directive combined with redeclaring the same properties over and over. It was easy to fix the code, but not easy to overcome this extreme race condition. Spent an hour trying to work it out, but it is not possible without a lot of $compile's, $apply's and $timeout's.

It really do not have to be so complicated. As I understand you had two issues 1) notSortable did not work 2) you could have different columns (properties) for different lists. Simply let dataTables render the data, and declare dtColumns dynamically each time a new list is selected :

var columns = [];
for (var prop in $scope.list[0] ) {
  columns.push({ data: prop })
}
$scope.x.dtColumns = columns;

Set $scope.list as data source :

$scope.x.dtOptions = DTOptionsBuilder.newOptions()
   .withOption('data', $scope.list)

render the "dataTables way" :

<table datatable=""  ....></table>

forked plnkr -> http://plnkr.co/edit/afqKW5uKW7Skfnm62zfq?p=preview

Answer 2

Try using square brackets inside the dtColumnDefspush like

$scope.x.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef([i]).notSortable());