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

【问题标题】：angular-datatables with ColVis, sorting or hiding columns removes all data带有 ColVis 的角度数据表，排序或隐藏列会删除所有数据
【发布时间】：2014-12-05 01:34:51
【问题描述】：

我正在使用 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)。

我在这里缺少什么？

【问题讨论】：

标签： angularjs angular-datatables

【解决方案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) 将其加载到数据中，您就可以开始了。

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

【讨论】：

【解决方案2】：

@Dom，

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

如果我做错了，请纠正我

【讨论】：