ue-pagination v1.0.3

Usage

import Pager from 'ue-pagination';

参数说明

使用示例

import React from 'react';

class Index extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      page: {
        totalCount: 2,
        pageNo: 1,
        pageCount: 2,
      }
    };

    this.config = {
      pageNo: 1,
      pageSize: 10,
      totalPage: 30,
      dataSource: [],
    };
  }

  splitPage = () => {
    const currentPage = this.config.pageNo;
    var startIndex = (currentPage - 1) * this.config.pageSize;
    var endIndex = currentPage * this.config.pageSize;

    if (currentPage > this.config.totalPage) {
      return;
    }

    return this.config.dataSource.slice(startIndex, endIndex);
  }

  handlePageChange = (page) => {
    this.config.pageNo = page;
    const _array = this.splitPage();

    this.setState({
      dataSource: _array,
      page: {
        pageCount: this.config.totalPage,
        pageNo: this.config.pageNo,
        pageSize: this.config.pageSize,
        totalCount: this.config.dataSource.length,
      }
    });
  }

  render() {
    return (
      <Pager
        visible={this.state.page.totalCount > 0}
        totalCount={this.state.page.totalCount}
        currentPage={this.state.page.pageNo}
        pageCount={this.state.page.pageCount}
        handlePageChange={this.handlePageChange}
      />
    )
  }
}