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 - 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}条数据</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 commons

 import (
     "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 =
      {
         paging.TotalRecord = totalRecord
         paging.PagingCount = int64(math.Ceil(float64(paging.TotalRecord) / float64(paging.PagingSize)))
     }
 }

 func (paging *Paging) Offset() int64 {
      || paging.PagingSize ==  {

     }

     offset := (paging.PagingIndex * paging.PagingSize) - paging.PagingSize + 

     return offset
 }

 func (paging *Paging) EndIndex() int64 {
      {
         return paging.PagingSize
     }

     offset := paging.PagingIndex * paging.PagingSize

     return offset
 }

感谢园子里的亲们，2016新年快乐*_^。