0

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.

yer
  • 1,454
  • 2
  • 16
  • 33
  • 2
    Have you thought about pagination? 5000 records is a struggle for any browser to display. – Tom Nijs Apr 10 '18 at 13:11
  • Yes, I set paging: true. I updated the question with datatable-basic.js code. Please check – yer Apr 10 '18 at 13:16
  • Ouch ... this is not how you do things in angular. For starters, dont load scripts like that. Secondly, do you really need a plugin to display a table? – Davy Apr 10 '18 at 13:29
  • @Davy I need to have extra features for the table like search, sorting. So I used plugin instead of normal table – yer Apr 10 '18 at 13:40
  • Angular is going to bind those 5000 rows, then you will load that script, and then that script will modify the rendered output of angular. Besides all the stuff that will break, paging will not solve your performance problem. If you need a plugin to do this, find one that is written to be used in Angular. This is really the wrong approach. – Davy Apr 10 '18 at 13:42

1 Answers1

1

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?

GreyBeardedGeek
  • 29,460
  • 2
  • 47
  • 67
  • Yes, I did server-side paging like this `$companies = Company::paginate(50);` and now I can only see 50 records. When I click next on the table in frontend it doesn't show any data after 50 records – yer Apr 10 '18 at 14:22
  • That's the point of pagination, you'll need to provide controls for the user to request the next/previous/first/last 50 records to be fetched from the database. – Tom Nijs Apr 10 '18 at 15:11
  • Yes, But How do I give controls to previous and next buttons in datatables? – yer Apr 10 '18 at 18:59