大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯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.showNumber113 let end = current + this.props.showNumber114 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 + 1150 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.pagingIndex177 let title = "第"+ pagingIndex + this.props.pagingTitle178 let text = pagingIndex179 180 if(this.props.title){181 title = this.props.title182 }183 184 if(this.props.text){185 text = this.props.text186 }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: 313 }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 }
好了,本次内容就这么多,写完这个文章后我马上要出去菜场买菜,饭都还没吃,这就是生活。
感谢园子里的亲们,2016新年快乐*_^。
原标题:ReactJS实现的通用分页组件
关键词:JS