大家多少都自己寫過各種版本的分頁工具條吧,像純服務(wù)版的,純jsWeb板的,Angular版的,因為這個基礎(chǔ)得不能再基礎(chǔ)的功能太多地方都會用到,下面我給出以個用ReactJS實現(xiàn)的版本,首先上圖看下效果:

注意這個組件需要ES6環(huán)境,最好使用NodeJS結(jié)合Webpack來打包:webpack --display-error-details --config webpack.config.js
此React版分頁組件請親們結(jié)合redux來使用比較方便,UI = Fn(State)
基本流程就是:用戶交互->Action->Reduce->Store->UIRender
了解以上基礎(chǔ)知識卻非常必要,但不是我此次要說的重點,以上相關(guān)知識請各位自行補腦,廢話就不多說,直接上代碼。
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}條數(shù)據(jù)</span> ) }}/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ * 從此模塊導(dǎo)出分頁條組件 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */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這個分頁數(shù)據(jù)對象的結(jié)構(gòu)paging.go服務(wù)端的Data Struct:
package commonsimport ( "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實現(xiàn)通用分頁組件的實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持!
新聞熱點
疑難解答