1.0.3 • Published 6 years ago

ue-pagination v1.0.3

Weekly downloads
1
License
ISC
Repository
-
Last release
6 years ago

Usage

import Pager from 'ue-pagination';

参数说明

参数说明
totalCount总共几条
currentPage当前第几页
pageCount总共几页
visible是否展示
handlePageChange点击分页按钮的回调函数

使用示例

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}
      />
    )
  }
}
1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago