在Angular DataTables中无法读取未定义的属性'aDataSort'

Question

我正在尝试在我的项目中实现angular-datatables，但它返回 "TypeError: Cannot read property 'aDataSort' of undefined"。

我正在使用：

AngularJS版本1.4.9。

JQuery版本2.1.1

DataTable版本1.10.10

参考网站：

angular-datatables

我的HTML代码：

<div class="col-md-12" ng-controller="WithAjaxCtrl as showCase"> <table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table></div>

我的AngularJS控制器代码

angular.module( 'admin.package', [
'ui.router',
'ui.bootstrap',
'datatables',
'datatables.bootstrap',
'ngResource',
'plusOne'
]).controller('WithAjaxCtrl', WithAjaxCtrl);

function WithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder,$http,UserService,localStorageService) {
      UserService.obj.get('packages/index',localStorageService.get('userkey').token).then(function (results) { 
        if(results.status==200){
        var vm = this;
        vm.dtOptions = DTOptionsBuilder.fromSource(results.data.packages)
            .withPaginationType('full_numbers');
        vm.dtColumns = [
           DTColumnBuilder.newColumn('id').withTitle('id'),
            DTColumnBuilder.newColumn('package_name').withTitle('Packag Name'),
            DTColumnBuilder.newColumn('amount').withTitle('Amount'),
            DTColumnBuilder.newColumn('package_duration').withTitle('Amount'),
            DTColumnBuilder.newColumn('currency').withTitle('validity')

        ];
        console.log(vm.dtColumns);
        console.log( vm.dtOptions);
      }else{
             alert('You are not a authorized user');
          }
        }, function(reason) {
            console.log(reason);
        });
    }

提前致谢

- Sharma Vikram

---

您不能将 $resource 用作 dataTables 的基础 - 如果您使用 fromSource()，则必须针对 JSON 文件（或提供纯 JSON 对象数组的任何内容），如果使用 $resource，则可以将其映射到简单对象数组并将其用作 withOption('data', value)，也许可以配合 withDataProp() 使用... - davidkonrad

Answer 1

当页面加载时，您正在将 showCase.dtOptions 和 showCase.dtColumns 传递给 datatables 指令，但是它们直到服务调用完成后才被声明。 解决此问题的一种方法是使用 ng-if 在服务调用后构建html：

<table ng-if="showCase.authorized" datatable="" ...

然后在您的控制器中，在调用服务之前初始化变量，并在调用完成后更新它：

app.controller('WithAjaxCtrl', function WithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder, UserService) {
  var vm = this;
  vm.authorized = false;
  UserService.get()...

这里有一个演示。您可以通过删除ng-if来重现该错误。http://plnkr.co/edit/XZYOEvgy1HoMYGmGdAYj?p=preview。

- j.wittwer

Answer 2

请确保您的表格结构中的<th>标签位于<thead>标签内。

示例：

<thead>
   <tr>
     <th> name </th>
     <th> email </th>
   </tr>
</thead>

- Faz Ahmad