@beisen/paging/index.js

configurable page component

import React, { Component } from 'react'
import { render } from 'react-dom'

import Paging from './src/index.js';

class Demo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      total: 11
    }
    this.setPage = this.setPage.bind(this);
  }

  setPage() {
    this.setState({
      page: 10
    })
  }

  render() {
    let self = this;
    const options = {
      hidden: false, // 是否渲染 默认false
      total: 10, //总页数
      currentPage: 1, // 当前页数
      visiblePages: 7, // 显示的页数，奇数，min = 5
      capacity: 15, // 每页条数，页面容量
      capacityList: [15, 30, 60, 100], //可选的页面容量
      onIndexChange(index){
        let a = index + 10
        if(self.state.total >a){
          return 
        }
        self.setState({
          total: a
        })
        console.log('当前页数',index)
        console.log('当前已知的总页数至少是',a)
      },
      onCapacityChange: index => console.log(index) //页面容量变化
      ,autoDirection: false
      ,direction: 'right-top',
      isShowDropdown: true
    };

    return (
      <div>
        <button onClick={this.setPage}>11111111</button>
          <Paging {...options} />
      </div>
    )
  }
}
render(<Demo />, document.getElementById('content'))