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

分页组件 * 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 ( ) } } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ * 分页条前后页组件 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ 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 ? : "" : ) 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 ( ) } } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ * 分页页码组件 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ 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 ( ) } } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ * 从此模块导出分页条组件 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ 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">

附上Paging这个分页数据对象的结构paging.go服务端的Data Struct：

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实现通用分页组件的实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

Reactjs实现通用分页组件的实例代码

猜你在找的JavaScript相关文章