Angular datatables: disable sorting not working for multiple tables

What versions you are using?

• angular version:1.2.15
• jquery version:1.10.1
• angular-datatables version:0.5.0

What’s the problem?

I am working with multiple 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 $http request to fetch new data from the database .For every table i have different dtColumnDefs which is set dynamically since my table column headers are dynamic except 1st two and last columns .My intention is to disable sorting for these column headers.I am able to find out total number of dynamic column then run a loop to dynamically disable those columns,Though the data table renders successfully for every user input but expected columns sorting options are not getting disabled. Check the plunker

Can you share your code?

   $scope.depshow=function(){
    $scope.dep=$scope.selected_dep;
      if($scope.dep==1)
    {
            $scope.list = [
                {"eid":"10","dyn1":"adval1","dyn2":"dval2","dyn3":"dval3","sales":"20"},
               
                {"eid":"20","dyn1":"adval2","dyn2":"dval2","dyn3":"dval3","sales":"20"},
                {"eid":"30","dyn1":"adval3","dyn2":"dval2","dyn3":"dval3","sales":"20"}
            ];
          }  
            else if($scope.dep==2)
            {
            $scope.list = [
                {"eid":"40","dyn1":"bdval1","dyn2":"dval2","dyn3":"dval3","sales":"20"},
               
                {"eid":"50","dyn1":"bdval2","dyn2":"dval2","dyn3":"dval3","sales":"20"},
                {"eid":"60","dyn1":"bdval3","dyn2":"dval2","dyn3":"dval3","sales":"20"}
            ];
            }
     if($scope.dep==3)       {
            $scope.list = [
                {"eid":"70","dyn1":"ccdval1","dyn2":"dval2","dyn3":"dval3","sales":"20"},
               
                {"eid":"80","dyn1":"cdval2","dyn2":"dval2","dyn3":"dval3","sales":"20"},
                {"eid":"0","dyn1":"cdval3","dyn2":"dval2","dyn3":"dval3","sales":"20"}
            ];
    }
   // i was getting data table can not be reinitialized so tried to make  initialization dynamic by counting      //function call
   $scope.i+=1;
    var x='v'+$scope.i;
    $scope.m='v'+$scope.i;
  
     $scope.x = {};
    $scope.x.dtOptions = DTOptionsBuilder.newOptions()
              .withOption('order', [0, 'asc']);
    //this length is dynamic ,used to determine how many dynamic columns are there
    $scope.ln=4;
    

    $scope.x.dtColumnDefs = [];
    for(var i=1;i<$scope.ln;i++){  
     $scope.x.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i).notSortable());
    }  

  }

`

[l-lin]

Here an example using directives: http://plnkr.co/edit/tDnp4s3eaMcaO8ZwVqZc?p=preview

I created a directive that contains the options of the datatables along with the list of data to be displayed and your $scope.ln:

angular.module('datatablesSampleApp', ['datatables']).directive('sampleTable', function() {
    return {
      restrict: 'E',
      scope: {
        list: '=',
        ln: '='
      },
      templateUrl: 'sampleTable.html',
      controller: 'tableCtrl'
    };
  }).controller('tableCtrl', function($scope, DTOptionsBuilder, DTColumnDefBuilder) {
    $scope.dtOptions = DTOptionsBuilder.newOptions()
      .withOption('order', [0, 'asc']);
    $scope.dtColumnDefs = [];

    for (var i = 1; i < $scope.ln; i++) {
      $scope.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i).notSortable());
    }
  });

In the HTML that calls the new directive:

<div ng-if="displayTable">
      <sample-table list="list" ln="ln"></sample-table>
    </div>

This flag displayTable is necessarily in order to re-render the table each time we switch the list.

Finally, in your main controller:

angular.module('datatablesSampleApp', ['datatables']).
  controller('sampleCtrl', function($scope, $timeout) {
    $scope.displayTable = false;
    $scope.department = [{
      value: "1",
      name: "sales"
    }, {
      value: "2",
      name: "admin"
    }, {
      value: "3",
      name: "other"
    }];

    $scope.dep = $scope.selected_dep;

    $scope.depshow = function() {
      $scope.displayTable = false;
      $scope.dep = $scope.selected_dep;
      if ($scope.dep == 1) {
        $scope.list = [{
           ...
        ];
        $scope.ln = 2;
      } else if ($scope.dep == 2) {
        $scope.list = [{
            ...
        ];
        $scope.ln = 3;
      }
      if ($scope.dep == 3) {
        $scope.list = [{
           ...
          }
        ];
        $scope.ln = 4;
      }
      // We need to "hack" this way in order to trigger the digest loop so that
      // ngIf will destroy its content, thus re-rendering the directive
      $timeout(function() {
        $scope.displayTable = true;
      }, 0);
    };

We need to manipulate the flag displayTable so angular will destroy and re-render the content. It’s a bit hackish, but it does the job.

[hubcoders]

@l-lin I can’t explain how eagerly i was waiting for your answer as i am stuck in this issue for last 15 days and no one could help me to solve the issue and you are the last light for me so thanks for managing some time for me.

In my plunker $scope.ln; is the length of dynamic columns for which i want to disable sorting .The $scope.ln; is not fixed and can be any number as it is dynamic .Kindly look to my updated plunker where the table is giving re initialization error on the 3rd call to the function. Up to the 2nd function call it is working fine…

you are advising to render a new table each time.can you update my plunker with your preferred way?