react-admin-lte/lib/Pager.js

简单封装的 AdminLTE react 类库，并包含一个编译配置。

import React from 'react';


export default class Pager extends React.Component {

  constructor(props, context) {
    super(props, context);

    this.go2Page = this.go2Page.bind(this);
    this.state = {
      skip: props.skip || 0,
      limit: props.limit || 10,
      total: props.total || 323
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState(nextProps);
  }

  go2Page(pg) {
    if (this.props.onChange) {
      this.props.onChange(pg);

    }
  }

  render() {

    let pageCount = this.state.total / this.state.limit;
    if (!this.state.total || pageCount <= 1) {
      return null;
    }
    let intPageCount = parseInt(pageCount);
    pageCount = (pageCount == intPageCount) ? intPageCount : intPageCount + 1;
    let skip = this.state.skip;
    let limit = this.state.limit;
    let pageNumber = parseInt(this.state.skip / this.state.limit);
    let startPageIndex = pageNumber - 3;
    let endPageIndex = pageNumber + 3;
    let maxPage = parseInt(this.state.total / this.state.limit);
    if (pageNumber < 4) {
      startPageIndex = 0;
      endPageIndex = 6;
    }
    if (endPageIndex >= maxPage) {
      startPageIndex = maxPage - 6;
      endPageIndex = maxPage;
    }
    if (startPageIndex < 0) {
      startPageIndex = 0;
    }

    var _this = this;
    var pages = [];

    var preBtn = null, nextBtn = null;
    if (pageNumber > 0) {
      preBtn = (<li className="paginate_button previous">
        <a  onClick={_this.go2Page.bind(null, pageNumber - 1) }>前一页</a></li>);
    } else {
      preBtn = (<li className="paginate_button previous disabled">
        <a >前一页</a></li>);
    }
    if (pageNumber == maxPage) {
      nextBtn = (<li className="paginate_button next disabled">
        <a >下一页</a></li>);
    } else {
      nextBtn = (<li className="paginate_button next">
        <a  onClick={_this.go2Page.bind(null, pageNumber + 1) }>下一页</a></li>);
    }

    for (let i = startPageIndex; i <= endPageIndex; i++) {
      var className = "paginate_button";
      if (i == pageNumber) {
        className = "paginate_button active";
      }
      pages.push(
        <li className={className} key={i}>
          <a  onClick={_this.go2Page.bind(null, i) }>{i + 1}</a>
        </li>
      )
    }

    return (
      <div className="row">
        <div className="col-sm-5 hidden-xs">
          <div className="dataTables_info" role="status" aria-live="polite">
            第 {skip + 1} - {skip + limit > this.state.total ? this.state.total : skip + limit} 条，共 {this.state.total}
            条 {pageCount} 页
          </div>
        </div>
        <div className="col-sm-7 col-xs-12">
          <div className="dataTables_paginate paging_simple_numbers">
            <ul className="pagination">
              {preBtn}
              {pages}
              {nextBtn}
            </ul>
          </div>
        </div>
      </div>
    );
  }

}