angularjs - 带有 ColVis 的角度数据表，排序或隐藏列会删除所有数据

Question

我将 AngularJS 与 Angular-datatables ( http://l-lin.github.io/angular-datatables/ ) 一起使用，并且我正在使用 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 手动调用，那么数据表开始表现得很奇怪。

如果我做错了什么，请纠正我