Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

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

share|improve this question
    
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 Mar 18 '16 at 8:58

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

share|improve this answer
    
Thanks! It works for me – Xander Sep 14 '16 at 11:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.