标签：
大家多少都自己写过各种版本的分页工具条吧，像纯服务版的，纯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
1 import React, { Component } from ‘react‘ 2 import Immutable from ‘immutable‘ 3 import _ from ‘lodash‘ 4 5 /* ================================================================================ 6 * React GrxPagingBar 通用分页组件 7 * author: 天真的好蓝啊 8 * ================================================================================ */ 9 class GrxPagingBar extends Component { 10 render() { 11 var pagingOptions = { 12 showNumber: 5, 13 firstText: "<<", 14 firstTitle: "第一页", 15 prevText: "<", 16 prevTitle: "上一页", 17 beforeTitle: "前", 18 afterTitle: "后", 19 pagingTitle: "页", 20 nextText: ">", 21 nextTitle: "下一页", 22 lastText: ">>", 23 lastTitle: "最后一页", 24 classNames: "grx-pagingbar pull-right", 25 } 26 27 $.extend(pagingOptions, this.props.pagingOptions) 28 29 return ( 30 <div className={pagingOptions.classNames} > 31 <GrxPagingFirst {...pagingOptions} {...this.props} /> 32 <GrxPagingBeforeAfter isBefore="true" {...pagingOptions} {...this.props} /> 33 <GrxPagingList {...pagingOptions} {...this.props} /> 34 <GrxPagingBeforeAfter isBefore="false" {...pagingOptions} {...this.props} /> 35 <GrxPagingLast {...pagingOptions} {...this.props} /> 36 <GrxPagingInfo {...this.props} /> 37 </div> 38 ) 39 } 40 } 41 42 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 43 * 分页条头组件 44 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ 45 class GrxPagingFirst extends Component { 46 render() { 47 var ids = [] 48 let paging = this.props.items.get(‘Paging‘) 49 let current = paging.get(‘PagingIndex‘) 50 let pagingIndex = current - 1 51 52 if(paging.get(‘PagingIndex‘) != 1){ 53 ids.push(1) 54 } 55 56 let html = ids.map( 57 (v,i) => 58 <span> 59 <GrxPagingNumber title={this.props.firstTitle} text={this.props.firstText} pagingIndex={1} {...this.props}/> 60 <GrxPagingNumber title={this.props.prevTitle} text={this.props.prevText} pagingIndex={pagingIndex} {...this.props}/> 61 </span> 62 ) 63 64 return ( 65 <span className="grx-pagingbar-fl"> 66 {html} 67 </span> 68 ) 69 } 70 } 71 72 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 73 * 分页条前后页组件 74 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ 75 class GrxPagingBeforeAfter extends Component { 76 render() { 77 var ids = [] 78 let isBefore = this.props.isBefore == "true" ? true : false 79 let paging = this.props.items.get(‘Paging‘) 80 let pagingCount = paging.get(‘PagingCount‘) 81 let current = paging.get(‘PagingIndex‘) 82 83 let pagingIndex = isBefore ? current - this.props.showNumber : current + this.props.showNumber 84 let title = (isBefore ? this.props.beforeTitle : this.props.afterTitle) + (this.props.showNumber + 1) + this.props.pagingTitle 85 86 if(isBefore && current > this.props.showNumber + 1){ 87 ids.push(1) 88 }else if(!isBefore && current < pagingCount - this.props.showNumber){ 89 ids.push(1) 90 } 91 92 var html = ids.map( 93 (v,i) => <a href="###" onClick={this.props.actions.pagingAction.bind(this, pagingIndex)} title={title}>..</a> 94 ) 95 96 return ( 97 <span> 98 {html} 99 </span> 100 ) 101 } 102 } 103 104 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 105 * 分页条页码列表组件 106 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ 107 class GrxPagingList extends Component { 108 render(){ 109 let paging = this.props.items.get(‘Paging‘) 110 let count = paging.get(‘PagingCount‘) 111 let current = paging.get(‘PagingIndex‘) 112 let start = current - this.props.showNumber 113 let end = current + this.props.showNumber 114 115 var pageIndexs = new Array(); 116 for(var i = start; i < end; i ++) { 117 if( i == current){ 118 pageIndexs.push(i) 119 }else if(i > 0 & i <= count) { 120 pageIndexs.push(i) 121 } 122 } 123 124 var pagingList = pageIndexs.map( 125 (v,i) => 126 current == v ? 127 count > 1 ? <span className="grx-pagingbar-current">{v}</span> : "" 128 : 129 <GrxPagingNumber pagingIndex={v} {...this.props} /> 130 ) 131 132 return( 133 <span> 134 {pagingList} 135 </span> 136 ) 137 } 138 } 139 140 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 141 * 分页条尾部组件 142 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ 143 class GrxPagingLast extends Component { 144 render() { 145 var ids = [] 146 let paging = this.props.items.get(‘Paging‘) 147 let pagingCount = paging.get(‘PagingCount‘) 148 let current = paging.get(‘PagingIndex‘) 149 let pagingIndex = current + 1 150 151 if(paging.get(‘PagingIndex‘) < paging.get(‘PagingCount‘)){ 152 ids.push(1) 153 } 154 155 let html = ids.map( 156 (v,i) => 157 <span> 158 <GrxPagingNumber title={this.props.nextTitle} text={this.props.nextText} pagingIndex={pagingIndex} {...this.props}/> 159 <GrxPagingNumber title={this.props.lastTitle} text={this.props.lastText} pagingIndex={pagingCount} {...this.props} /> 160 </span> 161 ) 162 163 return ( 164 <span className="grx-pagingbar-fl"> 165 {html} 166 </span> 167 ) 168 } 169 } 170 171 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 172 * 分页页码组件 173 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ 174 class GrxPagingNumber extends Component { 175 render(){ 176 let pagingIndex = this.props.pagingIndex 177 let title = "第"+ pagingIndex + this.props.pagingTitle 178 let text = pagingIndex 179 180 if(this.props.title){ 181 title = this.props.title 182 } 183 184 if(this.props.text){ 185 text = this.props.text 186 } 187 188 return( 189 <a href="###" onClick={this.props.actions.pagingAction.bind(this, pagingIndex)} title={title}> {text} </a> 190 ) 191 } 192 } 193 194 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 195 * 分页条信息组件 196 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ 197 class GrxPagingInfo extends Component { 198 render() { 199 let paging = this.props.items.get(‘Paging‘) 200 let pagingIndex = paging.get(‘PagingIndex‘) 201 let pagingCount = paging.get(‘PagingCount‘) 202 let totalRecord = paging.get(‘TotalRecord‘) 203 return ( 204 <span className="grx-pagingbar-info">第{pagingIndex}/{pagingCount}页,共{totalRecord}条数据</span> 205 ) 206 } 207 } 208 209 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 210 * 从此模块导出分页条组件 211 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ 212 export default GrxPagingBar
使用方法：
1 import React, { Component } from ‘react‘ 2 import _ from ‘lodash‘ 3 import classNames from ‘classnames‘ 4 import PagingBar from ‘.paging-bar‘ 5 6 /* ================================================================================ 7 * React PagingBar使用范例组件 8 * ================================================================================ */ 9 class PagingBarExample extends Component { 10 render() { 11 let pagingOptions = { 12 showNumber: 3 13 } 14 15 return ( 16 <table className="table table-condensed"> 17 <tbody> 18 <tr> 19 <td> 20 <PagingBar pagingOptions={pagingOptions} {...this.props} /> 21 </td> 22 </tr> 23 </tbody> 24 </table> 25 ) 26 } 27 }
附上Paging这个分页数据对象的结构paging.go服务端的Data Struct：
1 package commons 2 3 import ( 4 "math" 5 ) 6 7 type ( 8 Paging struct { 9 PagingIndex int64 10 PagingSize int64 11 TotalRecord int64 12 PagingCount int64 13 Sortorder string 14 } 15 ) 16 17 func (paging *Paging) SetTotalRecord(totalRecord int64) { 18 //paging.PagingIndex = 1 19 paging.PagingCount = 0 20 if totalRecord > 0 { 21 paging.TotalRecord = totalRecord 22 paging.PagingCount = int64(math.Ceil(float64(paging.TotalRecord) / float64(paging.PagingSize))) 23 } 24 } 25 26 func (paging *Paging) Offset() int64 { 27 if paging.PagingIndex <= 1 || paging.PagingSize == 0 { 28 return 0 29 } 30 31 offset := (paging.PagingIndex * paging.PagingSize) - paging.PagingSize + 1 32 33 return offset 34 } 35 36 func (paging *Paging) EndIndex() int64 { 37 if paging.PagingIndex <= 1 { 38 return paging.PagingSize 39 } 40 41 offset := paging.PagingIndex * paging.PagingSize 42 43 return offset 44 }
感谢园子里的亲们，2016新年快乐*_^。
标签：
原文地址：http://www.cnblogs.com/CHONGCHONG2008/p/react-pagingbar.html
