Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (10)


Hi,

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



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!



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


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.



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 >



Hi,

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 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>


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!



Hi,

Glad to hear that. We will add this solution to the next Metronic release.

Please let us know if you have any further questions on this topic or anything else.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(