无法读取角度数据表中未定义的属性“aDataSort”

Posted 2023-05-07

【中文标题】无法读取角度数据表中未定义的属性“aDataSort”

【英文标题】：Cannot read property 'aDataSort' of undefined in angular datatables

【发布时间】：2016-06-29 02:06:18

【问题描述】：

我正在尝试在我的项目中实现角度数据表，但它返回“TypeError: Cannot read property 'aDataSort' of undefined

我正在使用

Angular js 版本 1.4.9。

jQuery 2.1.1 版

数据表版本 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>

我的 Angular js 控制器代码

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);
        );
    

提前致谢

【问题讨论】：

你不能使用$resource's 作为数据表的基础——如果你使用fromSource()，你必须定位一个 JSON 文件（或者提供一个纯 JSON 对象数组的东西）如果你使用$resource 你可以将它映射到一个普通对象数组并将其用作withOption('data', value)，也许沿着withDataProp() ...

【参考方案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

【参考方案2】：

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

例子：

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