.withColVis() 在 angularjs 中不起作用

Question

当我尝试在 angularjs 数据表中使用 .withColVis() 时，会生成 DTOptionsBuilder.fromSource(...).withPaginationType(...).withColVis is not a function 错误。

检查这个插件。 plunkr link

如果我使用 .withDOM() 那么它就可以工作。检查这个 plunker.

我也参考了官网check this link :

帮我解决这个问题，我想在我的申请中使用.withColVis()。

.withColVis()用于显示列列表。

.withColVis() 和 .withDOM('<"H"Cr>t<"F"ip>') 执行相同的功能，例如显示 Show/Hide column 选项。但是 .WithDOM() 正在工作，而 .withColVis() 不工作。

无效代码：

(function(angular) {
  'use strict';
  angular.module('datatablesSampleApp', ['datatables']).
  controller('simpleCtrl', 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')
    ];
  });
})(angular);

工作代码：

(function(angular) {
  'use strict';

  angular.module('datatablesSampleApp', ['datatables'])
    .controller('SimpleCtrl', SimpleCtrl);

  function SimpleCtrl(DTOptionsBuilder, DTColumnBuilder) {
    var vm = this;
    vm.dtOptions = DTOptionsBuilder.newOptions()
      .withOption('sAjaxSource', 'data.json')
      .withDataProp('data')
      .withDOM('<"H"Cr>t<"F"ip>')
      .withPaginationType('full_numbers')
      .withDisplayLength(10);
    vm.dtColumns = [
      DTColumnBuilder.newColumn('id', 'ID'),
      DTColumnBuilder.newColumn('firstName', 'First name'),
      DTColumnBuilder.newColumn('lastName', 'Last name')
    ];

  }
})(angular);

Answer 1

你必须包含angular-datatables.colvis.js才能使（现已弃用）ColVis插件正常工作，这里来自分叉的plnkr：

<script src="https://rawgithub.com/l-lin/angular-datatables/v0.6.2/dist/plugins/colvis/angular-datatables.colvis.js"></script>

和注入datatables.colvis模块：

angular.module('datatablesSampleApp', ['datatables', 'datatables.colvis']).

https://plnkr.co/edit/edZcE3DLjaDSuNhTu2MV?p=preview

.withColVis() 在 angularjs 中不起作用

.withColVis() is not working in angularjs

datatable

jquery

angularjs

angular-datatables