Cannot read property 'aDataSort' of undefined in angular datatables

Question

I am trying to implement angular-datatables in my project but it returns "TypeError: Cannot read property 'aDataSort' of undefined

I am using

Angular js version 1.4.9.

Jquery version 2.1.1

DataTable version 1.10.10

Refrence site

angular-datatables

My Html Code

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

My Angular js Controller code

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

Thanks in advance

You cannot use $resource's as base for dataTables - if you are using fromSource() you must target a JSON file (or something that delivers a plain JSON array of objects) if you use a $resource you can map it to an array of plain objects and use it as withOption('data', value), perhaps along withDataProp() ... — davidkonrad
– davidkonrad, Commented Mar 18, 2016 at 8:58

j.wittwer · Accepted Answer · 2016-04-20 23:45:45Z

8

You are passing showCase.dtOptions and showCase.dtColumns to the datatables directives when the page loads, but they are not declared until after your service call is completed. One workaround for this would be to use ng-if to construct the html after the service call:

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

Then in your controller, initialize the variable before calling the service, and updating it after the call is complete:

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

Here is a demo. You can reproduce the error by removing the ng-if. http://plnkr.co/edit/XZYOEvgy1HoMYGmGdAYj?p=preview

edited Apr 20, 2016 at 23:45

answered Apr 20, 2016 at 23:39

j.wittwer

9,4973 gold badges32 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tomislav Stankovic · Accepted Answer · 2020-04-13 09:02:47Z

2

Please make sure your <th> are inside of <thead> in your table structure.

Example:

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

edited Apr 13, 2020 at 9:02

Tomislav Stankovic

3,12417 gold badges38 silver badges43 bronze badges

answered Apr 13, 2020 at 4:39

Faz Ahmad

573 bronze badges

Collectives™ on Stack Overflow

Cannot read property 'aDataSort' of undefined in angular datatables

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related