简体   繁体   中英

How to add customized pagination in ng2-smart-table in angular?

How do you handle pagination in ng2-smart-table in angular 7? I have a too many records and it would take too much time to load all of them. How do i set the table to request 10 records at a time? For example: when the table loads for the first time is requests the 10 first records. When I press one of the pagination buttons, it requests the "n'th" records? I've read the previous articles but I'm still unclear on how to handle this issue.

Hoping that the request is being passed to server to fetch the data. If so add two parameters page index(refers to the page number) and page size(refers to number of rows per page) while handling with enitity framework or sql we can use skip and take logic to handle the pagination. ex: if my request has page_index=1 and page_size=20 then i need to return 1st 20 recs so the code will be basequery.skip(page_size*(page_index-1)).take(page_size); like wise if the page_index=2 then it will skip 1st 20 and then take the next 20 recs.

To handle in UI we can either add the pagersettings object of ng2-smart-table refer the doc https://akveo.github.io/ng2-smart-table/#/documentation or if we need a customise pagination we can use source.setPaging() method and it takes 3 parameters pagenumber,per page count of rows and a boolean to reload the table or not

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM