Reactjs如何实现通用分页组件

这篇文章给大家分享的是有关Reactjs如何实现通用分页组件的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

大家多少都自己写过各种版本的分页工具条吧，像纯服务版的，纯jsWeb板的，Angular版的，因为这个基础得不能再基础的功能太多地方都会用到，下面我给出以个用ReactJS实现的版本，首先上图看下效果：

    注意这个组件需要ES6环境，最好使用NodeJS结合Webpack来打包：webpack --display-error-details --config webpack.config.js

    此React版分页组件请亲们结合redux来使用比较方便，UI = Fn(State)

    基本流程就是：用户交互->Action->Reduce->Store->UIRender

    了解以上基础知识却非常必要，但不是我此次要说的重点，以上相关知识请各位自行补脑，废话就不多说，直接上代码。

   filename: paging-bar.js

 import React, { Component } from 'react' import Immutable from 'immutable' import _ from 'lodash' /* ================================================================================  * React GrxPagingBar 通用分页组件  * author: 天真的好蓝啊  * ================================================================================ */ class GrxPagingBar extends Component {  render() {   var pagingOptions = {    showNumber: 5,    firstText: "<<",    firstTitle: "第一页",    prevText: "<",    prevTitle: "上一页",    beforeTitle: "前",    afterTitle: "后",    pagingTitle: "页",    nextText: ">",    nextTitle: "下一页",    lastText: ">>",    lastTitle: "最后一页",    classNames: "grx-pagingbar pull-right",   }   $.extend(pagingOptions, this.props.pagingOptions)   return (    <div className={pagingOptions.classNames} >     <GrxPagingFirst {...pagingOptions} {...this.props} />     <GrxPagingBeforeAfter isBefore="true" {...pagingOptions} {...this.props} />     <GrxPagingList {...pagingOptions} {...this.props} />     <GrxPagingBeforeAfter isBefore="false" {...pagingOptions} {...this.props} />     <GrxPagingLast {...pagingOptions} {...this.props} />     <GrxPagingInfo {...this.props} />    </div>   )  } } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  * 分页条头组件  * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ class GrxPagingFirst extends Component {  render() {   var ids = []   let paging = this.props.items.get('Paging')   let current = paging.get('PagingIndex')   let pagingIndex = current - 1   if(paging.get('PagingIndex') != 1){    ids.push(1)   }   let html = ids.map(    (v,i) =>     <span>     <GrxPagingNumber title={this.props.firstTitle} text={this.props.firstText} pagingIndex={1} {...this.props}/>     <GrxPagingNumber title={this.props.prevTitle} text={this.props.prevText} pagingIndex={pagingIndex} {...this.props}/>    </span>   )   return (    <span className="grx-pagingbar-fl">     {html}    </span>   )  } } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  * 分页条前后页组件  * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ class GrxPagingBeforeAfter extends Component {  render() {   var ids = []   let isBefore = this.props.isBefore == "true" ? true : false   let paging = this.props.items.get('Paging')   let pagingCount = paging.get('PagingCount')   let current = paging.get('PagingIndex')   let pagingIndex = isBefore ? current - this.props.showNumber : current + this.props.showNumber   let title = (isBefore ? this.props.beforeTitle : this.props.afterTitle) + (this.props.showNumber + 1) + this.props.pagingTitle   if(isBefore && current > this.props.showNumber + 1){    ids.push(1)   }else if(!isBefore && current < pagingCount - this.props.showNumber){    ids.push(1)   }   var html = ids.map(    (v,i) => <a href="###" onClick={this.props.actions.pagingAction.bind(this, pagingIndex)} title={title}>..</a>   )   return (    <span>     {html}    </span>   )  } } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  * 分页条页码列表组件  * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ class GrxPagingList extends Component {  render(){   let paging = this.props.items.get('Paging')   let count = paging.get('PagingCount')   let current = paging.get('PagingIndex')   let start = current - this.props.showNumber   let end = current + this.props.showNumber   var pageIndexs = new Array();   for(var i = start; i < end; i ++) {    if( i == current){     pageIndexs.push(i)    }else if(i > 0 & i <= count) {     pageIndexs.push(i)    }   }   var pagingList = pageIndexs.map(    (v,i) =>     current == v ?     count > 1 ? <span className="grx-pagingbar-current">{v}</span> : ""    :     <GrxPagingNumber pagingIndex={v} {...this.props} />   )   return(    <span>     {pagingList}    </span>   )  } } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  * 分页条尾部组件  * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ class GrxPagingLast extends Component {  render() {   var ids = []   let paging = this.props.items.get('Paging')   let pagingCount = paging.get('PagingCount')   let current = paging.get('PagingIndex')   let pagingIndex = current + 1   if(paging.get('PagingIndex') < paging.get('PagingCount')){    ids.push(1)   }   let html = ids.map(    (v,i) =>     <span>     <GrxPagingNumber title={this.props.nextTitle} text={this.props.nextText} pagingIndex={pagingIndex} {...this.props}/>     <GrxPagingNumber title={this.props.lastTitle} text={this.props.lastText} pagingIndex={pagingCount} {...this.props} />    </span>   )   return (    <span className="grx-pagingbar-fl">     {html}    </span>   )  } } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  * 分页页码组件  * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ class GrxPagingNumber extends Component {  render(){   let pagingIndex = this.props.pagingIndex   let title = "第"+ pagingIndex + this.props.pagingTitle   let text = pagingIndex   if(this.props.title){    title = this.props.title   }   if(this.props.text){    text = this.props.text   }   return(    <a href="###" onClick={this.props.actions.pagingAction.bind(this, pagingIndex)} title={title}> {text} </a>   )  } } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  * 分页条信息组件  * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ class GrxPagingInfo extends Component {  render() {   let paging = this.props.items.get('Paging')   let pagingIndex = paging.get('PagingIndex')   let pagingCount = paging.get('PagingCount')   let totalRecord = paging.get('TotalRecord')   return (    <span className="grx-pagingbar-info">第{pagingIndex}/{pagingCount}页,共{totalRecord}条数据</span>   )  } } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  * 从此模块导出分页条组件  * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ export default GrxPagingBar 使用方法： import React, { Component } from 'react' import _ from 'lodash' import classNames from 'classnames' import PagingBar from '.paging-bar' /* ================================================================================  * React PagingBar使用范例组件  * ================================================================================ */ class PagingBarExample extends Component {  render() {   let pagingOptions = {    showNumber: 3   }   return (    <table className="table table-condensed">     <tbody>      <tr>       <td>        <PagingBar pagingOptions={pagingOptions} {...this.props} />       </td>      </tr>     </tbody>    </table>   )  } }

附上Paging这个分页数据对象的结构paging.go服务端的Data Struct：

package commons import (  "math" ) type (  Paging struct {   PagingIndex int64   PagingSize int64   TotalRecord int64   PagingCount int64   Sortorder string  } ) func (paging *Paging) SetTotalRecord(totalRecord int64) {  //paging.PagingIndex = 1  paging.PagingCount = 0  if totalRecord > 0 {   paging.TotalRecord = totalRecord   paging.PagingCount = int64(math.Ceil(float64(paging.TotalRecord) / float64(paging.PagingSize)))  } } func (paging *Paging) Offset() int64 {  if paging.PagingIndex <= 1 || paging.PagingSize == 0 {   return 0  }  offset := (paging.PagingIndex * paging.PagingSize) - paging.PagingSize + 1  return offset } func (paging *Paging) EndIndex() int64 {  if paging.PagingIndex <= 1 {   return paging.PagingSize  }  offset := paging.PagingIndex * paging.PagingSize  return offset }

感谢各位的阅读！关于“Reactjs如何实现通用分页组件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！