当前位置: 动力学知识库 > 问答 > 编程问答 >

angularjs - 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?

网友答案:

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.

网友答案:

@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

分享给朋友:
您可能感兴趣的文章:
随机阅读: