Question

我正在使用AngularJS和Angular-datatables（http://l-lin.github.io/angular-datatables/），我正在使用数据表ColVis插件。该表呈现正常，但对列标题进行排序或使用ColVis显示/隐藏列删除所有数据：

我在Angular控制器中有一个表

<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使用控制器：

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

当我点击列标题或使用ColVis显示/隐藏时，表格似乎重绘但没有数据。

我的数据来自API，因此它与Angular-Datatables ColVis示例（http://l-lin.github.io/angular-datatables/#/withColVis）不同。

我在这里缺少什么？

Answer 1

没有出现的原因是因为您需要数据源。提供的示例包含以下代码：

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')
    ];
});

注意第二行：$scope.dtOptions = DTOptionsBuilder.fromSource('data.json')

使用的方法是从json文件中提取数据。

查看网络时，这就是他们的数据源 - http://l-lin.github.io/angular-datatables/data.json?_=1417925914539。

只需重新创建该数据文件，使用DTOptionsBuilder.fromSource(PATH_TO_FILE)将其加载到数据中，您应该好好去。

如果您有任何问题，请告诉我。

Answer 2

@Dom，

请看屏幕截图，这里方法工作正常但是当从第二个api成功响应调用此方法时，新数据UI不会得到更改，或者如果我使用$ apply手动调用，那么数据表开始表现得很奇怪。

如果我做错了，请纠正我

具有ColVis，排序或隐藏列的angular-datatables会删除所有数据

2 个答案: