rlsaj rlsaj - 6 months ago 86
AngularJS Question

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

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 Dom
Answer

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.

Comments