search

l-lin / angular-datatables

DataTables with Angular
https://l-lin.github.io/angular-datatables/
MIT License
1.58k stars 486 forks source link

Cannot read property 'aDataSort' of undefined #1101

Closed poonamgp14 closed 7 years ago

poonamgp14 commented 7 years ago

What versions you are using?

What's the problem?

I am working on SPA where angular-datatables is been used to render at least 2 datatables per page. It works fine when i stay within a page. However, it start throwing an error when i change views which has different content in a datatable. Error is -

DashboardNoctriaComponent.html:1 ERROR TypeError: Cannot read property 'aDataSort' of undefined at _fnSortFlatten (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), :5872:35) at _fnSortingClasses (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), :6210:14) at loadedInit (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), :1209:5) at HTMLTableElement.eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), :1307:5) at Function.each (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), :362:19) at jQuery.fn.init.each (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), :157:17) at jQuery.fn.init.DataTable [as dataTable] (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), :869:8) at jQuery.fn.init.$.fn.DataTable (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), :15069:18) at DetailedResourceComponent.webpackJsonp.../../../../../src/app/components/detailed-resource/detailed-resource.component.ts.DetailedResourceComponent.renderTable (detailed-resource.component.ts:52) at SafeSubscriber._next (detailed-resource.component.ts:71)

Can you share your code?

Below mentioned model is same everywhere in the application. Setting dtOptions on ngOnInit() and then prepare the data to render and then trigger next() function

  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 7,
      deferRender: true
      lengthMenu: [[10, 25, 50, -1], [10, 25, 50, 'All']],
      retrieve: true
    };
    this.setResources();
  }
  public renderTable() {
    // selecting datatable instance using angular way didn't work
    // thus using jQuery
    const table = $('#detailed-resource-optria').DataTable();
    table.destroy();
    this.dtTrigger.next();
  }
  public setResources() {
       //do something and pushes data to resourceList
        this.renderTable();
      });
  }
<div class="ibox-content">
    <table id="detailed-resource-optria" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="compact row-border hover cell-border" data-page-length='10'>
    <thead>
    <tr>
      <th *ngFor="let header of componentDetails.table.headers">{{header}}</th>
    </tr>
    </thead>
    <tbody>
      <tr *ngFor="let result of resourceList">
        <td>rows as per the result</td>
      </tr>
    </tbody>
    </table>
  </div>

I am not sure why i am getting this error. Any help is greatly appreciated.

poonamgp14 commented 7 years ago

The error is fixed by providing the header as shown below instead of doing ngFor

        <thead>
        <tr>
          <th>Name</th>
          <th>Status</th>
          <th>Description</th>
          <th>Resources</th>
        </tr>
        </thead>

Previously, it was

<thead>
<tr>
<th *ngFor="let header of componentDetails.table.headers">{{header}}</th>
<tr>
</thead>