甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

Reactjs如何实现通用分页组件

这篇文章给大家分享的是有关Reactjs如何实现通用分页组件的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

专注于为中小企业提供成都网站建设、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业天水免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千余家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

大家多少都自己写过各种版本的分页工具条吧，像纯服务版的，纯jsWeb板的，Angular版的，因为这个基础得不能再基础的功能太多地方都会用到，下面我给出以个用ReactJS实现的版本，首先上图看下效果：

    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 (
   
    
    
    
    
    
    
   
  )  } } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  * 分页条头组件  * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ 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) =>                      )   return (         {html}       )  } } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  * 分页条前后页组件  * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ 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) => ..   )   return (         {html}       )  } } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  * 分页条页码列表组件  * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ 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 ? {v} : ""    :        )   return(         {pagingList}       )  } } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  * 分页条尾部组件  * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ 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) =>                      )   return (         {html}       )  } } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  * 分页页码组件  * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ 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(     {text}    )  } } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  * 分页条信息组件  * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ 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 (    第{pagingIndex}/{pagingCount}页,共{totalRecord}条数据   )  } } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  * 从此模块导出分页条组件  * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ 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 (                                                       )  } }

附上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 = 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如何实现通用分页组件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


网站栏目：Reactjs如何实现通用分页组件
转载来于：http://chengdu.cdxwcx.cn/article/jceijd.html

其他资讯