建築分頁在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]); 
    });; 
}; 

P.當您確實符合您的要求時，請在此發佈答案，以便其他人可以將其用作分頁的基礎。

Answer 2

以下是創建分頁選項的完整代碼。全文可用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'));