在Reactjs中建立分页

Question

所以我在Reactjs中建立分页的方式有点奇怪,但它对我有用,我,我想怎么说给我看第5页的前5(1-5)给我看5-max.但我不清楚如何做到这一点.

这就是我现在拥有的:

  render: function() {
    // Do we have more then one page?
    if (this.props.maxPages > 0){

      // We have to add one to the max pages that come back.
      var pageLink = this.props.maxPages + 1;
      var currentPage = this.props.currentPage;
      var liElements = []

      // Build [<<][<] for the user.
      if (pageLink > 1) {
        liElements.push(<li><a href="#posts?page=1">&#60;&#60;</a></li>);
        liElements.push(<li><a href={this.pageSubtraction(currentPage, pageLink)}>&#60;</a></li>);
      }

      // Build the individual [x][y][z] links.
      for (var i = 1; i <= pageLink; i++) {
        liElements.push(<li key={i} id={i}><a href={"#posts?page="+i}>{i}</a></li>);
      }

      // Build the [>][>>] for the user.
      if (pageLink > 1) {
        liElements.push(<li><a href={this.pageAddition(currentPage, pageLink)}>&#62;</a></li>);
        liElements.push(<li><a href={"#posts?page="+pageLink}>&#62;&#62;</a></li>);
      }

      return (<ul className="pagination">{liElements}</ul>);
    }else{
      // Return nothing.
      return ( <div></div> );
    }
  }

这将构建我[<<][<][1][2][3] ... [>][>>]很棒,但他们没有限制.

此时:

• pageLink = 6 (最大页数 - 我知道可怕的变量名)
• currentPage = 1 (您当前的页面)

所以我需要的是:

[<<][<][1][2][3][4][5][>][>>]选择Page 5 [<<][<][5][6][>][>>]但我不确定我目前的设置是否允许我这样做.

Answer 1

这是一个有点复杂的算法(并未提供所有细节).不要担心这里的标记,而是从表示应该绘制的内容的纯数据结构开始可能更简单.

Pagination = function(props){
  var pages = props.maxPages + 1;
  var current = props.currentPage;
  var links = [];

  // leading arrows
  if (current > 0) {
    links.push([0, "<<"]);
    links.push([current - 1, "<"]);
  }

  for (var i=current-3; i<current+4; i++) {
    if (i > 0 && i < pages) {
      links.push([i, i]);
    }
  }

  // tailing arrows
  if (current < pages) {
    links.push([current + 1, ">"]);
    links.push([pages - 1, ">>"]);
  }

  return JSON.stringify(links, null, 4);
};

现在我们得到这样的东西(jsbin).您还可以轻松编写单元测试,以确保获得正确的结果.

[
    [
        0,
        "<<"
    ],
    [
        1,
        "<"
    ],
    [
        1,
        1
    ],
    [
        2,
        2
    ],
    [
        3,
        3
    ],
    [
        4,
        4
    ],
    [
        5,
        5
    ],
    [
        3,
        ">"
    ],
    [
        7,
        ">>"
    ]
]

在此处获取正确的数据后,您可以通过演示功能映射该数据.

function PageLink(i, char){
  character = character || String(i);
  return (
    <li key={char}>
      <a href={"#posts?page="+i}>{char}</a>
    </li>
  );
}

Pagination = function(props){
  /* same code as before */

  return links.map(function(x){
      return PageLink(x[0], x[1]);
  });;
};

如果您确实符合您的要求,请在此处发布答案,以便其他人可以将其作为其分页的基础.