Example code for implementing universal paging components with Reactjs-JS Tutorial-php.cn

Everyone has written various versions of paging toolbars, such as the pure service version, the pure jsWeb board version, and the Angular version, because this basic function is used in many places, as follows I will give you a version implemented with ReactJS. First, look at the effect in the picture above:

Example code for implementing universal paging components with Reactjs

Note that this component requires an ES6 environment. It is best to use NodeJS combined with Webpack for packaging: webpack --display-error-details --config webpack.config.js

This React version of the paging component is more convenient for you to use it with redux. UI = Fn(State)

The basic process is: User interaction->Action->Reduce->Store->UIRender

It is very necessary to understand the above basic knowledge, but it is not the focus of what I want to talk about this time. The above related knowledge Please fill in your own brain, I won’t talk nonsense and just go straight to the code.

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 (       
 
 
 ) } }

Copy after login

Attached is the structure of the paging data object paging.go server 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 }

Copy after login

The above is the editor I would like to introduce to you the example code of implementing universal paging component in Reactjs. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

Please pay attention to the PHP Chinese website for more relevant articles on the example code of implementing universal paging components with Reactjs!