Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to display more page item? #269

Open
hjyssg opened this issue May 19, 2020 · 5 comments
Open

How to display more page item? #269

hjyssg opened this issue May 19, 2020 · 5 comments

Comments

@hjyssg
Copy link

hjyssg commented May 19, 2020

image

There are space to display more page item. Currently, there is only 1, 2, 3, 4, 5 and 282.

<Pagination ref={ref => this.pagination = ref}
                            current={this.state.pageIndex}  
                            pageSize={this.getNumPerPage()}
                            showQuickJumper={{goButton: true}}
                            total={fileLength} 
                            itemRender={(item, type) =>{
                                if(type === "page"){
                                    return  <div>{item}</div>;
                                }else if(type === "prev" || type === "next"){
                                    return <a className="rc-pagination-item-link" />
                                }
                            }}
                            onChange={this.handlePageChange.bind(this)} 
/>);

Is there a prop to do it?
Thank you very much.

@hjyssg
Copy link
Author

hjyssg commented May 19, 2020

I noticed in the render() of Pagination.js

var pageBufferSize = props.showLessItems ? 1 : 2;

var left = Math.max(1, current - pageBufferSize);
var right = Math.min(current + pageBufferSize, allPages);

if (current - 1 <= pageBufferSize) {
  right = 1 + pageBufferSize * 2;
}

if (allPages - current <= pageBufferSize) {
  left = allPages - pageBufferSize * 2;
}

Could you add one more prop to allow user chagne the pageBufferSize?

@chxhitsz
Copy link

chxhitsz commented Oct 9, 2020

I also have this problem. Have you solved it?

@hjyssg
Copy link
Author

hjyssg commented Oct 9, 2020

I modified its code and created my own pagination

@chxhitsz
Copy link

It's great.Let me refer to it and create my own pagination.Thank you!

@SalahAdDin
Copy link

👍🏽 to make this also customizable!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants