Tout le monde a probablement écrit différentes versions de barres d'outils de pagination, telles que la version pure service, la version pure jsWeb board et la version Angular, car cette fonction extrêmement basique est utilisée dans de nombreux endroits, comme suit je vais vous donner une version implémenté avec ReactJS. Tout d'abord, jetez un ?il à l'effet ci-dessus?:

Notez que ce composant nécessite un environnement ES6. Il est préférable d'utiliser NodeJS combiné avec Webpack pour le packaging?: webpack --display-error-details --config webpack.config.js

Cette version React du composant de pagination est plus pratique à utiliser avec redux UI = Fn(State)
<.>

Le processus de base est?: Interaction utilisateur->Action->Réduire->Store->UIRender

Il est très nécessaire de comprendre les connaissances de base ci-dessus, mais ce n'est pas le Au centre de ce dont je veux parler cette fois. Les connaissances connexes ci-dessus. Veuillez remplir votre propre cerveau, je ne dirai pas de bêtises et passerai simplement au code.

nom du fichier?: paging-bar.js

import React, { Component } from 'react'
import Immutable from 'immutable'
import _ from 'lodash'
/* ================================================================================
 * React GrxPagingBar 通用分頁(yè)組件
 * author: 天真的好藍(lán)啊
 * ================================================================================ */
class GrxPagingBar extends Component {
 render() {
  var pagingOptions = {
   showNumber: 5,
   firstText: "<<",
   firstTitle: "第一頁(yè)",
   prevText: "<",
   prevTitle: "上一頁(yè)",
   beforeTitle: "前",
   afterTitle: "后",
   pagingTitle: "頁(yè)",
   nextText: ">",
   nextTitle: "下一頁(yè)",
   lastText: ">>",
   lastTitle: "最后一頁(yè)",
   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>
  )
 }
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * 分頁(yè)條頭組件
 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
class GrxPagingFirst extends Component {
 render() {
  var ids = []
  let paging = this.props.items.get(&#39;Paging&#39;)
  let current = paging.get(&#39;PagingIndex&#39;)
  let pagingIndex = current - 1
  if(paging.get(&#39;PagingIndex&#39;) != 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>
  )
 }
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * 分頁(yè)條前后頁(yè)組件
 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
class GrxPagingBeforeAfter extends Component {
 render() {
  var ids = []
  let isBefore = this.props.isBefore == "true" ? true : false
  let paging = this.props.items.get(&#39;Paging&#39;)
  let pagingCount = paging.get(&#39;PagingCount&#39;)
  let current = paging.get(&#39;PagingIndex&#39;)
  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>
  )
 }
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * 分頁(yè)條頁(yè)碼列表組件
 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
class GrxPagingList extends Component {
 render(){
  let paging = this.props.items.get(&#39;Paging&#39;)
  let count = paging.get(&#39;PagingCount&#39;)
  let current = paging.get(&#39;PagingIndex&#39;)
  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>
  )
 }
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * 分頁(yè)條尾部組件
 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
class GrxPagingLast extends Component {
 render() {
  var ids = []
  let paging = this.props.items.get(&#39;Paging&#39;)
  let pagingCount = paging.get(&#39;PagingCount&#39;)
  let current = paging.get(&#39;PagingIndex&#39;)
  let pagingIndex = current + 1
  if(paging.get(&#39;PagingIndex&#39;) < paging.get(&#39;PagingCount&#39;)){
   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>
  )
 }
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * 分頁(yè)頁(yè)碼組件
 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
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>
  )
 }
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * 分頁(yè)條信息組件
 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
class GrxPagingInfo extends Component {
 render() {
  let paging = this.props.items.get(&#39;Paging&#39;)
  let pagingIndex = paging.get(&#39;PagingIndex&#39;)
  let pagingCount = paging.get(&#39;PagingCount&#39;)
  let totalRecord = paging.get(&#39;TotalRecord&#39;)
  return (
   <span className="grx-pagingbar-info">第{pagingIndex}/{pagingCount}頁(yè),共{totalRecord}條數(shù)據(jù)</span>
  )
 }
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * 從此模塊導(dǎo)出分頁(yè)條組件
 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
export default GrxPagingBar
 
使用方法：
 
import React, { Component } from &#39;react&#39;
import _ from &#39;lodash&#39;
import classNames from &#39;classnames&#39;
import PagingBar from &#39;.paging-bar&#39;
/* ================================================================================
 * 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>
  )
 }
}

Joignez la structure de l'objet de données de pagination Paging. La structure de données du serveur paging.go?:

Ce qui précède Voici l'exemple de code de Reactjs implémentant le composant de pagination universelle introduit par l'éditeur. J'espère qu'il vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois?!

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
}

Pour des articles plus pertinents sur l'exemple de code d'implémentation de composants de pagination universelle avec Reactjs, veuillez faire attention au site Web PHP chinois?!