React theme pagination is too long.
Hi, we purchased the Metronic theme from keenthemes.com, and we are facing some issues with pagination. In our React application, we retrieve pagination data from an API call. However, the theme does not provide a way to customize the pagination length in the UI.
For example, let"s say we have 1000 records and display 10 records per page. In this case, we would have 100 pagination links. Our goal is to show only the first 3 links initially and hide the rest. When the user clicks on the 2nd or 3rd page, we want to dynamically show the next 3 page links accordingly.
Currently, the theme displays all 100 links below the table, making the UI very congested.
For example, let"s say we have 1000 records and display 10 records per page. In this case, we would have 100 pagination links. Our goal is to show only the first 3 links initially and hide the rest. When the user clicks on the 2nd or 3rd page, we want to dynamically show the next 3 page links accordingly.
Currently, the theme displays all 100 links below the table, making the UI very congested.
Replies (9)
Deleted comment
Hi,
Thank you for reaching out to us.
Could you please specify which Metornic version are you using?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thank you for reaching out to us.
Could you please specify which Metornic version are you using?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
We are using Metronic8/react/demo1
Hi,
We checked our pagination component and by default, we are displaying all pagination links.
If you want to display only a few page buttons then you can update code in file src/app/modules/apps/user-management/users-list/components/pagination/UsersListPagination.tsx.
Copy code from the following gist file and paste it into UsersListPagination.tsx.
https://gist.github.com/laurisstepanovs/d6761bacd67743ba43812f78c5414e0c
Use PAGINATION_PAGES_COUNT constant to change count of pagination buttons you want to display.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
We checked our pagination component and by default, we are displaying all pagination links.
If you want to display only a few page buttons then you can update code in file src/app/modules/apps/user-management/users-list/components/pagination/UsersListPagination.tsx.
Copy code from the following gist file and paste it into UsersListPagination.tsx.
https://gist.github.com/laurisstepanovs/d6761bacd67743ba43812f78c5414e0c
Use PAGINATION_PAGES_COUNT constant to change count of pagination buttons you want to display.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thank you so much, Lauris! The given code is working perfectly, but the GitHub link you provided was not accessible to me. However, I found the updated code in my email and used that to make it work. Thank you for including it there.
If you can correct the GitHub link, it would be helpful for others who want to use this feature, just like me. Once again, thank you for your assistance, and I appreciate your help!
If you can correct the GitHub link, it would be helpful for others who want to use this feature, just like me. Once again, thank you for your assistance, and I appreciate your help!
Hi,
Thank you for your feedback.
The link is fixed now.
Please let us know if you have any further questions on this topic or anything else.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thank you for your feedback.
The link is fixed now.
Please let us know if you have any further questions on this topic or anything else.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Your Support Matters!
We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Thank you. I value your concern and assistance. I checked the link, and it"s working fine. Thank you once again!
If I have any other questions, I will post them here. Otherwise, there are no issues.
If I have any other questions, I will post them here. Otherwise, there are no issues.
Hi team,
I would like to request the placement of the "First" button after the "Previous" button and the "Last" button before the "Next" button in the pagination design. For instance, if there are 100 pagination links and I am currently on the 78th page, it would be inconvenient to click the "Previous" button 77 times to reach the first page. Therefore,
I kindly request your assistance in implementing this improvement
Ex:
< Previous |<< First| 1 2 3 | Last >> | Next >
I would like to request the placement of the "First" button after the "Previous" button and the "Last" button before the "Next" button in the pagination design. For instance, if there are 100 pagination links and I am currently on the 78th page, it would be inconvenient to click the "Previous" button 77 times to reach the first page. Therefore,
I kindly request your assistance in implementing this improvement
Ex:
< Previous |<< First| 1 2 3 | Last >> | Next >
Hi,
You can just add two new list elements which will update the state to first page or to last page.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
You can just add two new list elements which will update the state to first page or to last page.
<li className={clsx('page-item', {
disabled: isLoading || pagination.page === 1,
})}><a onClick={()=>updatePage(1)} style={{cursor: 'pointer'}} className="page-link">First</a></li>
...
<li className={clsx('page-item', {
disabled: isLoading || pagination.page === pagination.links?.length! - 2,
})}><a onClick={()=>updatePage((pagination.links?.length! - 2))} style={{cursor: 'pointer'}} className="page-link">Last</a></li>Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi team,
I have thoroughly tested this feature, and I am pleased to report that it is working flawlessly. I would like to express my sincere appreciation for your assistance in resolving the issue. Thank you!
I have thoroughly tested this feature, and I am pleased to report that it is working flawlessly. I would like to express my sincere appreciation for your assistance in resolving the issue. Thank you!
React Dev Vacancy
KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
