在 Reactjs 中构建分页

Question

所以我在 Reactjs 中构建分页的方式有点奇怪，但它对我有用，我，怎么会想说 给我看第 5 页的前 5 个（1-5）给我看最多 5 个。但我不清楚如何做到这一点。

这是我目前拥有的：

  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][>][>>] 选择第 5 页 [<<][<][5][6][>][>>] 但我不确定我目前的设置是否允许我这样做。

Answer 1

以下是创建分页选项的完整代码。完整的帖子可在here 获得。

var pager = React.createClass({
        render : function(){
            var li = [];
            var pageCount = props.Size;
            for(var i = 1; i <=pageCount; i++){
                if(props.currentPage == i){
                    li.push(<li key={i} className="active"><a href="#">{i}</a></li>);
                }
                else{
                    li.push(<li key={i} ><a href="#" onClick={props.onPageChanged.bind(null,i)}>{i}</a></li>);
                }
            }
            return (<ul className="pagination">{li}</ul>);
        }
 });

var dataGrid = React.createClass({
        render : function(){
            return (
                <tr>
                    <td>{props.item.Name}</td>
                    <td>{props.item.Address}</td>
                    <td>...</td>
                    .....
                </tr>
            );
        }
    });

var EmployeeGridTable = React.createClass({
        getInitialState : function(){
            return {
                Data : {
                    List : [],
                    totalPage : 0,
                    sortColumnName : null,
                    sortOrder : null,
                    currentPage : 1,
                    pageSize : 3
                }
            }
        },
        componentDidMount : function(){
            this.populateData();
        },            
        populateData: function(){
            var params = {
                pageSize : this.state.Data.pageSize,
                currentPage : this.state.Data.currentPage
            }
            if(this.state.Data.sortColumnName){
                params.sortColumnName = this.state.Data.sortColumnName;
            }
            if(this.state.Data.sortOrder){
                params.sortOrder = this.state.Data.sortOrder;
            }

            $.ajax({
                url : this.props.dataUrl,
                type : 'GET',
                data : params,
                success : function(data){
                    if(this.isMounted()){
                        this.setState({
                            Data : data
                        });
                    }
                }.bind(this),
                error: function(err){
                    alert('Error');
                }.bind(this)
            });
        },

        pageChanged:function(pageNumber,e){
            e.preventDefault();
            this.state.Data.currentPage = pageNumber;
            this.populateData();
        },

        sortChanged : function(sortColumnName, order , e){
            e.preventDefault();
            this.state.Data.sortColumnName = sortColumnName;
            this.state.Data.currentPage = 1;
            this.state.Data.sortOrder = order.toString().toLowerCase() == 'asc' ? 'desc':'asc';
            this.populateData();
        },

        _sortClass : function(filterName){
            return "fa fa-fw " + ((filterName == this.state.Data.sortColumnName) ? ("fa-sort-" + this.state.Data.sortOrder) : "fa-sort");
        },

        render : function(){
            var rows = [];
            this.state.Data.List.forEach(function(item){
                rows.push(<dataGrid key={item.EmployeeID} item={item}/>);
            });
            return (
                <div>
                    <table className="table table-responsive table-bordered">
                        <thead>
                            <tr>
                                <th onClick={this.sortChanged.bind(this,'FirstName',this.state.Data.sortOrder)}>First Name
                                    <i className={this._sortClass('FirstName')}></i></th>
                                <th onClick={this.sortChanged.bind(this,'LastName',this.state.Data.sortOrder)}>
                                    Last Name
                                    <i className={this._sortClass('LastName')}></i></th>
                                <th onClick={this.sortChanged.bind(this,'EmailID',this.state.Data.sortOrder)}>
                                    Email
                                    <i className={this._sortClass('EmailID')}></i>
                                </th>
                                <th onClick={this.sortChanged.bind(this,'Country',this.state.Data.sortOrder)}>
                                    Country
                                    <i className={this._sortClass('Country')}></i>
                                </th>
                                <th onClick={this.sortChanged.bind(this,'City',this.state.Data.sortOrder)}>
                                    City
                                    <i className={this._sortClass('City')}></i>
                                </th>
                            </tr>
                        </thead>
                        <tbody>{rows}</tbody>
                    </table>
                    <pager Size={this.state.Data.totalPage} onPageChanged={this.pageChanged} currentPage={this.state.Data.currentPage}/>
                </div>
            );
        }
    });
    ReactDOM.render(<EmployeeGridTable dataUrl="/home/getEmployeeList"/>, document.getElementById('griddata'));

Answer 2

这是一个有点复杂的算法（并没有提供所有细节）。与其担心这里的标记，不如从一个代表应该绘制什么的纯数据结构开始。

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]);
  });;
};

附：当您确实得到它符合您的要求时，请在此处发布答案，以便其他人可以将其用作分页的基础。