Angularjs data table dissappearing while rendering multiple times

Question

I am using angular data table where i am generating table every time user selects an option.For the first input the data table render successfully but after that when user select onther option the data table disappear from the view.The problem can be solved if i place the data table options vm.dtOptions and vm.dtColumnDefs outside the function.But i need to solve the issue keeping the options inside the function as my $scope.ln is dynamically generated inside the function and i need this value to limit the loop.So how can i achieve my goal so that instead of disappearing multiple table can be showed based on user input?

var app = angular.module('myApp',['datatables']);
            app.controller('MyCtrl', function($scope,DTOptionsBuilder,DTColumnBuilder,DTColumnDefBuilder) {
        
        $scope.department = [
                {value : "1", name : "sales"},
                {value : "2", name : "admin"},
                {value : "3", name : "other"}
            ];
        
        $scope.dep=$scope.selected_dep;
        
        $scope.depshow=function(){
        $scope.dep=$scope.selected_dep;
        if($scope.dep==1)
        {
                $scope.list = [
                    {"eid":"10","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"},
                   
                    {"eid":"20","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"},
                    {"eid":"30","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"}
                ];
              }  
                else if($scope.dep==2)
                {
                $scope.list = [
                    {"eid":"40","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"},
                   
                    {"eid":"50","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"},
                    {"eid":"60","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"}
                ];
                }
         if($scope.dep==3)       {
                $scope.list = [
                    {"eid":"70","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"},
                   
                    {"eid":"80","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"},
                    {"eid":"0","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"}
                ];
        }
        
        $scope.vm = {};
        
            $scope.vm.dtOptions = DTOptionsBuilder.newOptions()
                  .withOption('order', [0, 'asc']);
        
            $scope.ln=4;
               $scope.vm.dtColumnDefs = [
            ];
            for(var i=1;i<$scope.ln;i++){
        
        $scope.vm.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i).notSortable()); 
          }
        }
                
            });

<html>
        <head>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
          <script src="https://phpflow.com/demo/angular_datatable_demo/angular-datatables.min.js"></script>
          <script src="https://phpflow.com/demo/angular_datatable_demo/jquery.dataTables.min.js"></script>
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
          <link rel="stylesheet" href="https://phpflow.com/demo/angular_datatable_demo/datatables.bootstrap.css"> 
        </head>
        <div class="container">
        <div ng-app="myApp" ng-controller="MyCtrl">
Select    <select ng-model="selected_dep" ng-change="depshow()" ng-options="item.value as item.name for item in department">

<option value="">select a department</option>   
 </select>
    {{selected_dep}}
        <table  class="table table-striped table-bordered" dt-options="vm.dtOptions" dt-column-defs="vm.dtColumnDefs" datatable="ng">
            <thead>
              <tr>
        	 <th>Employee ID</th>
        	<th>dynamic clm1</th>
        	<th>dynamic clm2</th>
        	<th>dynamic clm3</th>
          <th>sales</th>

        </thead>
            <tbody>
          
           <tr ng-repeat="data in list">
              <td> {{ data.eid }} </td>
              <td> {{ data.dyn1 }} </td>
              <td> {{ data.dyn2 }} </td>
              <td> {{ data.dyn3 }} </td>
              
              <td> {{ data.sales }} </td>
              </tr>
        </tbody>
        </table>
        </div>

If you run the code snippet an error is generated from the first time — geo
– geo, Commented Jun 26, 2017 at 14:32
i am getting no error there is a select option and you have to select an option to get the table — query
– query, Commented Jun 26, 2017 at 14:34
Sorry, I give up. I read through the documentation, but still couldn't figure it out. Good luck to you. — adam0101
– adam0101, Commented Jun 27, 2017 at 21:29
I fixed your example though so it runs on here. Hopefully someone else will be intrigued and troubleshoot it some more for you. — adam0101
– adam0101, Commented Jun 27, 2017 at 21:35
ok i am excepting the ans and will be happy if you can show some light on the issue posted here stackoverflow.com/questions/44775899/… — query
– query, Commented Jun 27, 2017 at 21:46

geo · Accepted Answer · 2017-06-26 14:41:44Z

0

The reason for this is that you dont have brackets on the

else if($scope.dep==2)

answered Jun 26, 2017 at 14:41

geo

2,4535 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

query Over a year ago

thanks for detecting the mistake but that was not the reason of my problem........

Collectives™ on Stack Overflow

Angularjs data table dissappearing while rendering multiple times

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related