CODEWITHSUNDEEP
angulardatatablerendering
yer
yer

Reputation: 1532

Angular4: Datatable taking time to load large data

I've a datatable which is taking lot of time to show the data

I called the script like this in the component: 

  ngAfterViewInit() {
    $.getScript('./assets/js/datatables/datatable-basic.js');
  }

And rendering data in html like this

<table class="table zero-configuration">
    <thead>
        <tr>
          <th>Name</th>
          <th>ID</th>
          <th></th>
        </tr>
     </thead>
     <tbody>
        <tr *ngFor="let companyData of company?.companies; trackBy: userThumb">
            <td class="text-truncate">{{ companyData?.name }}</td>
            <td class="text-truncate">{{companyData?.id}}</td>
            <td class="text-truncate"></td>
        </tr>
     </tbody>
    </table>

Here's my datatable-basic.js

setTimeout(function () {
    $('.zero-configuration').DataTable({
      "iDisplayLength": 50,
      "paging": true
    });
}, 3000);

The companies will be having nearly 5000 arrays.

Upvotes: 0

Views: 2528

Answers (1)

GreyBeardedGeek
GreyBeardedGeek

Reputation: 30088

It appears that you have "set paging" client-side - you're still loading 5K records over the network but just display 50 at a time. To really affect performance, you'll probably have to do server-side paging, so that you only load 50 records at a time.

Edit: Here's an example: How to use server side option in Angular DataTables with the Angular way example?

Upvotes: 1

Related Questions