Pagination with React

Question

My pagination is doing something strange. I use react-pager.

When I click on the first page - I have not any items (but I heed them), when I click on the second page I have 4 items and when I click on the third page my items just added to the items from the second page. I mean on the third page I have 8 items old+new, not 4 new items like I heed. I think something wrong in slice.

Component is below:

import React, {Component} from 'react'; import {connect} from 'react-redux'; import Pager from 'react-pager'; class AlbumsShow extends Component { constructor(props) { super(props); this.renderImage = this.renderImage.bind(this); this.handlePageChanged = this.handlePageChanged.bind(this); this.state = { total: 3, current: 1, visiblePage: 2, }; } handlePageChanged(newPage) { this.setState({ current : newPage }); } renderImage() { return this.props.images.slice((this.state.current-1), this.state.current * 4).map(image => ( <li key={image.id}> <img className="album_img" alt="job" src={image.img} /> <p className="album_title">Test</p> </li> )); } render() { return ( <div> <div> {this.renderImage()} </div> <Pager total={this.state.total} current={this.state.current} visiblePages={this.state.visiblePage} titles={{ first: '<|', last: '>|' }} className="pagination-sm pull-right" onPageChanged={this.handlePageChanged} /> </div> ); } } function mapStateToProps(state, ownProps) { const currentAlbumId = parseInt(ownProps.params.id, 10); return { images: state.main.albums.filter(album => album.id === currentAlbumId)[0].images, }; } export default connect(mapStateToProps)(AlbumsShow);

Also if I will have more 10 items my pagination should be visible and if less than 10 - null, but my condition is not working too. For example:

 {this.renderImage() > 10 ? <Pager total={this.state.total} current={this.state.current} visiblePages={this.state.visiblePage} titles={{ first: '<|', last: '>|' }} className="pagination-sm pull-right" onPageChanged={this.handlePageChanged} />: null }

Damien Monni · Accepted Answer · 2017-05-25 07:53:20Z

I guess this.state.current is the page number. So your slice may be something like this:

slice(this.state.current * 4, (this.state.current + 1) * 4 - 1)

EDIT: I didn't see your second question. If you don't want your pagination if more than 10 items you can do:

 {this.props.images.length > 10 ? <Pager total={this.state.total} current={this.state.current} visiblePages={this.state.visiblePage} titles={{ first: '<|', last: '>|' }} className="pagination-sm pull-right" onPageChanged={this.handlePageChanged} />: null }

EDIT 2: Oops, current starts at 0 not 1. I edited the slice above.

EDIT: 3: If you want to display all images when you have less than 10 items you can do something like this:

 renderImage() { const imgs = this.props.images.length > 10 ? this.props.images.slice(this.state.current * 4, (this.state.current + 1) * 4 - 1) : this.props.images; return imgs.map(image => ( <li key={image.id}> <img className="album_img" alt="job" src={image.img} /> <p className="album_title">Test</p> </li> )); } render() { return ( <div> <ul> {this.renderImage()} </ul> {this.props.images.length > 10 ? <Pager total={this.state.total} current={this.state.current} visiblePages={this.state.visiblePage} titles={{ first: '<|', last: '>|' }} className="pagination-sm pull-right" onPageChanged={this.handlePageChanged} /> : null } </div> ); }

It helps and my items don't add to each other, but my first page still empty.
Pagination works, thank you. I have one more question about conditions: When I paste your edits to my code my items disappeared, but console is clear.
Do you mean when you have less than 10 images you display 0 image? If so this is normal because you return null if the condition is false. I will edit my answer to show you how to do it.
Look, when I have less than 10 images - I need to do my pagination invisible and all my items should display, but when items more than 10 - I have 10 items on one page and my pagination visibe.
Check my EDIT 3, this should work. I just re-edited it, just now so be sure to use my last EDIT 3. Refresh this stackoverflow page to display last version.

Hien · Accepted Answer · 2017-08-31 03:29:39Z

Another component handling paging is react-pagination-custom.

<TinyPagination total = {...} selectedPageId = {...} itemPerPage = {...} renderBtnNumber = {...} maxBtnNumbers = {...} preKey = '...' nextKey = '...' {...someOptionalProperties} />

It allow you custom everything (number buttons, wrap container, spread,..). Its document is well, demo is also clear.

Collectives™ on Stack Overflow

Pagination with React

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related