Web Demo Mobile Demo Angular Demo Vue Demo React Demo

分页 Pagination

源代码
import React from 'react';
import { Panel, Pagination } from 'rc-easyui';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      total: 114,
      pageNumber: 1,
      pageSize: 10,
      layout1: [
        "list",
        "sep",
        "first",
        "prev",
        "next",
        "last",
        "sep",
        "refresh",
        "info"
      ],
      layout2: ["first", "prev", "next", "last", "info"],
      layout3: ["links", "info"]
    }
  }
  render() {
    const { total, pageNumber, pageSize } = this.state;
    const pager = (layout) => (
      <Pagination
        total={total}
        pageNumber={pageNumber}
        pageSize={pageSize}
        layout={layout}
        onPageChange={event => this.setState(event)}
      />
    );
    const panel = (layout) => (
      <Panel
        style={{ marginBottom: 10 }}
        bodyStyle={{ padding: 20 }}
        footer={() => (pager(layout))}
      >
        <p>Page Number: {pageNumber}</p>
      </Panel>
    );
    return (
      <div>
        <h2>Pagination Layout</h2>
        {panel(this.state.layout1)}
        {panel(this.state.layout2)}
        {panel(this.state.layout3)}
      </div>
    );
  }
}

export default App;