大家多少都自己写过各种版本的分页工具条吧，像纯服务版的，纯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新年快乐*_^。
时间： 2024-08-25 21:43:29