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 - 1if（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 : falselet 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.showNumberlet title = （isBefore ? this.props.beforeTitle : this.props.afterTitle） + （this.props.showNumber + 1） + this.props.pagingTitleif（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.showNumberlet end = current + this.props.showNumbervar 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 + 1if（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.pagingIndexlet title = "第"+ pagingIndex + this.props.pagingTitlelet text = pagingIndexif（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 commonsimport （ "math"）type （ Paging struct {PagingIndex int64PagingSize int64TotalRecord int64PagingCount int64Sortorder string }）func （paging *Paging） SetTotalRecord（totalRecord int64） { //paging.PagingIndex = 1 paging.PagingCount = 0 if totalRecord > 0 {paging.TotalRecord = totalRecordpaging.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实现通用分页组件的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！