question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

can we add a new feature which helps us customize the inner HTML of <Pagination/>?

See original GitHub issue

What problem does this feature solve?

Recently I added react-router in my project. In one page there is a table with multi-page data. I want to change the url When jumping to a new page, and also the back or forward buttons in browser works well. Now I have to change the url by history API once page changes. It’s troublesome because of too much code needing to be written every time. However, it can be done perfectly just by < Link /> of react-router, so it’s better to customize inner HTML of every button in pagination.

What does the proposed API look like?

<Pagination innerItem={<span className="link">三</span>}>
<Pagination innerItem={(i, pagination) => <Link to=`/list/${i}` />}>

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:20 (16 by maintainers)

github_iconTop GitHub Comments

1reaction
benjycuicommented, Jun 29, 2017

How about:

function itemRender(page: number, type: 'page' | 'prev' | 'next'): React.ReactNode
1reaction
benjycuicommented, May 5, 2017

@bang88 类似于 Breadcrumb 的 itemRender,自行决定返回 Link 还是 a,或者默认的 li

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Build a Custom Pagination Component in React
In this post, we will focus on pagination and we'll build a custom controlled component that handles page buttons based on the current...
Read more >
How to make a Pagination using HTML and CSS
Creating pagination is quite simple, you can easily do that by using Bootstrap, and JavaScript. However, in this article, we will use HTML...
Read more >
How to paginate innerHTML - javascript - Stack Overflow
First, my innerHTML looks like this: function viewMusicFeed() { $.ajax({ ... Since there will be a load of data, I need to paginate...
Read more >
Pagination Custom Features - Create your layout rules for ...
Pagination enables you to create up-to-date, high-quality PDF and InDesign ... With Pagination, you can use your custom layout rules to create perfect ......
Read more >
Pagination - CSS: Cascading Style Sheets - MDN Web Docs
This cookbook pattern demonstrates the navigation pattern used to display pagination, where the user can move between pages of content such ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found