Cannot read property 'aDataSort' of undefined in agnular js datatables

[sharmavikram]

Hello everyone,
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
http://l-lin.github.io/angular-datatables/
Below is my code

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 controller

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

[l-lin]

What's the content of results.data.packages?

[sharmavikram]

in results.data.packages contains my json output

[
        {
            "id": 51,
            "package_name": "Package 2",
            "amount": 1,
            "package_duration": 1,
            "currency": "USD"
        },
        {
            "id": 52,
            "package_name": "package 3",
            "amount": 50,
            "package_duration": 11,
            "currency": "USD"
        },
        {
            "id": 53,
            "package_name": "package 4",
            "amount": 50,
            "package_duration": 15,
            "currency": "USD"
        },
        {
            "id": 54,
            "package_name": "package 5",
            "amount": 50,
            "package_duration": 5,
            "currency": "USD"
        },
        {
            "id": 55,
            "package_name": "package 6",
            "amount": 25,
            "package_duration": 25,
            "currency": "USD"
        },
        {
            "id": 61,
            "package_name": "package 25",
            "amount": 1,
            "package_duration": 1,
            "currency": "USD"
        }
    ]

[l-lin]

fromSource only accepts an URL to fetch the data, not the data itself. You need to use the data parameter instead:

vm.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('data', [...]);

[sharmavikram]

i am trying above code but it also not working

vm.dtOptions = DTOptionsBuilder.newOptions()
      .withOption('data', results.data.packages);
       console.log( vm.dtOptions);

Here is the Google drive link https://drive.google.com/open?id=0B1eUUOBdbNQVVGFkTE14UC1CeEU&authuser=0

[l-lin]

Your table is rendered after you fetch the data. Thus, your table do not have any options, that's why DataTables is throwing such error. Since you are rendering in two steps (one request to the server, then render the table), you need to tell the table not to render before the data is fetched. You can use the ngIf to do that:

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

function WithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder,$http,UserService,localStorageService) {
    var vm = this;
    vm.displayTable = false;
  UserService.obj.get('packages/index',localStorageService.get('userkey').token).then(function (results) { 
    if(results.status==200){
    vm.dtOptions = DTOptionsBuilder.newOptions().withOption('data', 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')
    ];
    vm.displayTable = true;
    console.log(vm.dtColumns);
    console.log( vm.dtOptions);
  }else{
         alert('You are not a authorized user');
      }
    }, function(reason) {
        console.log(reason);
    });
}

[sharmavikram]

thank you so much for above example it is working nicely.
and one question how to add html button in column for edit and delete records

[l-lin]

http://l-lin.github.io/angular-datatables/#/bindAngularDirective

[sharmavikram]

Thanks once again

[rajthilak04]

Nice job