angular-datatables with ColVis, sorting or hiding columns removes all data

Question

I am using AngularJS with Angular-datatables (http://l-lin.github.io/angular-datatables/) and I am using the datatables ColVis plugin. The table renders fine but sorting the column headers OR using the ColVis show/hide columns removes all data:

I have a table within an Angular controller

<div ng-controller="withColVisCtrl">
<table datatable dt-options="dtOptions">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>          
    </tr>
  </thead>
  <tbody>
     <tr ng-repeat="value in value_list">
       <td>col 1 data</td>
       <td> col 2 data</td>
    </tr>
 </tbody>
</table>

withColVisCtrl uses the controller:

  angular.module('myApp').controller('withColVisCtrl', function ($scope, DTOptionsBuilder) {
        $scope.dtOptions = DTOptionsBuilder.newOptions()
          .withBootstrap()
          .withColVis()
          .withDOM('C<"clear">lfrtip')                                                
          .withColVisOption('aiExclude', [1]);                                       
      });

When I click on a column heading OR use the ColVis show/hide then the table seems to redraw but with no data.

My data is coming through an API so it's different to the Angular-Datatables ColVis examples (http://l-lin.github.io/angular-datatables/#/withColVis).

What am I missing here?

Dom · Accepted Answer · 2014-12-07 04:24:01Z

The reason nothing is appearing is because you need a data source. The example provided has the following code:

angular.module('datatablesSampleApp', ['datatables']).controller('withColVisCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
    $scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
        .withPaginationType('full_numbers')
        // Active ColVis plugin
        .withColVis()
        // Add a state change function
        .withColVisStateChange(function(iColumn, bVisible) {
            console.log('The column' + iColumn + ' has changed its status to ' + bVisible)
            })
        // Exclude the last column from the list
        .withColVisOption('aiExclude', [2]);
    $scope.dtColumns = [
        DTColumnBuilder.newColumn('id').withTitle('ID'),
        DTColumnBuilder.newColumn('firstName').withTitle('First name'),
        DTColumnBuilder.newColumn('lastName').withTitle('Last name')
    ];
});

Notice the second line: $scope.dtOptions = DTOptionsBuilder.fromSource('data.json')

The method being used is pulling in data from a json file.

When viewing the network, this is what their data source looks like - http://l-lin.github.io/angular-datatables/data.json?_=1417925914539 .

Simply recreate that data file, load that in data using DTOptionsBuilder.fromSource(PATH_TO_FILE), and you should be good to go.

Let me know if you have any issues.

Deepak Patidar · Accepted Answer · 2016-05-25 12:29:55Z

0

@Dom,

Please see the screenshot, here the method is working fine but when calling this method from second api success response with new data the UI will not getting change or if I used $apply for invoke manually then the data table started behave weird.

Please correct me if I am doing something wrong

answered May 25, 2016 at 12:29

Deepak Patidar

3941 gold badge10 silver badges24 bronze badges

Collectives™ on Stack Overflow

angular-datatables with ColVis, sorting or hiding columns removes all data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related