Angular -datatables with ColVis, sorting or hiding columns deletes all data
I am using AngularJS with Angular-datatables ( http://l-lin.github.io/angular-datatables/ ) and I am using Colvis datatables plugin. The table displays fine but sorts the column headers OR using Show / hide ColVis columns removes all data:
I have a table inside 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 a 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 the column header OR use Colvis show / hide, then the table appears to be redrawn but no data.
My data comes in via API, so it is different from the Angular-Datatables ColVis examples ( http://l-lin.github.io/angular-datatables/#/withColVis ).
What am I missing here?
source to share
The reason why nothing appears 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')
];
});
Pay attention to the second line: $scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
The method used is to extract data from a json file.
When browsing the net, this is what their data source looks like - http://l-lin.github.io/angular-datatables/data.json?_=1417925914539 .
Just re-create that datafile, upload it with DTOptionsBuilder.fromSource(PATH_TO_FILE)
, and you should be good to go.
Let me know if you have any problems.
source to share
@Dom,
Look at the screenshot, here the method is working fine, but when calling this method from the second answer about a successful api response with new data, the UI won't change, or if I used $ apply to call it manually, then the data table started behaving strange.
Please correct me if I do something wrong
source to share