0

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 }

2 Answers 2

1

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>
    );
  }
6
  • It helps and my items don't add to each other, but my first page still empty. May 25, 2017 at 7:08
  • 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. May 25, 2017 at 7:20
  • 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. May 25, 2017 at 7:22
  • 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. May 25, 2017 at 7:38
  • 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. May 25, 2017 at 7:40
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.