Reactjs implements the instance code of the general paging component and reactjs Paging

Reactjs implements the instance code of the general paging component and reactjs Paging

You have written paging Toolbar of various versions, such as the pure service version, pure jsWeb board, and Angular version, because this basic function cannot be used in many places, I will provide a version implemented with ReactJS. First, let's take a look at the effect:

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

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

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

It is necessary to understand the above basic knowledge, but it is not the focus of my speech. Please make up your own brains for the above knowledge. If you do not talk nonsense, go directly to the code.

Filename: paging-bar.js

Import React, {Component} from 'react 'import Immutable from 'immutable' import _ from 'lodash'/* ================== ========================================================== ================================= * React GrxPagingBar universal paging component * author: naively good blue * =============================================== ========================================================== ====== */class GrxPagingBar extends Component {render () {var pagingOptions = {showNumber: 5, first Text: "<", firstTitle: "First page", prevText: "<", prevTitle: "Previous Page", beforeTitle: "before", afterTitle: "after", pagingTitle: "page", nextText: ">", nextTitle: "Next page", lastText: ">", lastTitle: "last page", classNames: "grx-pagingbar pull-right",} $. extend (pagingOptions, this. props. pagingOptions) return (<div className = {pagingOptions. classNames }> <GrxPagingFirst {... pagingOptions }{... this. props}/> <GrxPagingBefore After isBefore = "true "{... pagingOptions }{... this. props}/> <GrxPagingList {... pagingOptions }{... this. props}/> <GrxPagingBeforeAfter isBefore = "false "{... pagingOptions }{... this. props}/> <GrxPagingLast {... pagingOptions }{... this. props}/> <GrxPagingInfo {... this. props}/> </div> )}} /* ++ ++ ++ * Paging header component * ++ ++ ++ */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> )}} /* ++ ++ ++ * Components * ++ ++ ++ */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> )}} /* ++ ++ ++ * page number list component * ++ ++ ++ */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> )}} /* ++ ++ ++ * components at the end of a paging bar * ++ ++ ++ */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> )}} /* ++ ++ ++ * page number component * ++ ++ ++ */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> )}} /* ++ ++ ++ * paging information component * ++ ++ ++ */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"> page {pagingIndex}/{pagingCount, {totalRecord} pieces of data </span> )}} /* ++ ++ ++ * export the paging bar component from this module * ++ ++ ++ */export default GrxPagingBar usage: import React, {Component} from 'react 'import _ from 'lodash' import classNames from 'classnames 'import PagingBar from '. paging-bar '/* ====================================== ========================================================== ======= * React PagingBar example component * ============================ ========================================================== =============== */class PagingBarExample extends Component {render () {let pagingOptions = {showNumber: 3} return (<table className = "table-condensed"> <tbody> <tr> <td> <PagingBar pagingOptions = {pagingOptions }{... this. props}/> </td> </tr> </tbody> </table> )}}

Attach the structure of the Paging Data Object paging. go server Data Struct:

package commonsimport ( "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}

The above is the example code of Reactjs to implement general paging components. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!