CODEWITHSUNDEEP
htmlangularangular6
Mr. Wizard
Mr. Wizard

Reputation: 1183

ngx-pagination - rendering page very slow

I am trying to build an application using Nodejs, Angular 6 and SQL. In my database I have more than 80.000 items, and when I try to paginate using ngx-pagination, it runs very slow (the get from database happens in 15 seconds, but the page is rendered in more that 1,5 minutes)

Here you have a snippet of my code:

.html

<table>
    <thead>
    ...
    </thead>
    <tbody>
        <tr *ngFor="let ded of filteredArray | orderBy : key : reverse | { itemsPerPage: crtPage, currentPage: p, totalItems: itemsLength() }"
            <td>{{ ded.name }}</td>
            <td>{{ ded.group }}</td>
            <td>{{ ded.age }}</td>
        <tr>

    </tbody>

    <div class="hint-text">
        <span>
            Showing {{ itemsLength() }} entries.
        </span>
    </div>

<table>

.ts

ngOnInit() {
    this.refreshItemsList()
}

refreshItemsList() {
    this.dedService.getNNItems().subscribe((res) => {
      this.extractItems(res)
    });
}

extractItems(res) {
    this.filteredArray = res
}

itemsLength() {
    return this.filteredArray.length
}

What can I do to render items faster? Thank you.

Upvotes: 0

Views: 691

Answers (1)

Zak
Zak

Reputation: 1165

So if you're trying to get the 80k elements and page client side, it's not a good approach. It's using a lot of memory and compute power, each time you refresh.

Take a look at server-side paging : https://www.npmjs.com/package/ngx-pagination#server-side-paging

Nodejs side you can paginate your results with something like this :

var query = "Select * from ?? DESC limit ? OFFSET ?";

//Mention table from where you want to fetch records example-users & send limit and start 

var table = ["your table",LimitNum,startNum];
query = mysql.format(query, table);
connection.query(query, function(err, rest) {
 if(err){
  res.json(err);
}
else{
// Total Count varibale display total Count in Db and data display the records
   res.json("Total Count": totalCount , "data":rest)
}

Source

Upvotes: 1

Related Questions