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

 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 (
   <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>
  )
 }
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * 分页条头组件
 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
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>
  )
 }
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * 分页条前后页组件
 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
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>
  )
 }
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * 分页条页码列表组件
 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
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>
  )
 }
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * 分页条尾部组件
 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
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>
  )
 }
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * 分页页码组件
 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
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>
  )
 }
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * 分页条信息组件
 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
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">第{pagingIndex}/{pagingCount}页,共{totalRecord}条数据</span>
  )
 }
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * 从此模块导出分页条组件
 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
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">
    <tbody>
     <tr>
      <td>
       <PagingBar pagingOptions={pagingOptions} {...this.props} />
      </td>
     </tr>
    </tbody>
   </table>
  )
 }
}

附上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实现通用分页组件的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 用ReactJS和Python的Flask框架编写留言板的代码示例

    近期要在生产环境上使用react,所以,自己学习了一下,写了一个简单的留言板小程序.完整的代码可以到这里下载:message-board Use 前端使用React,然后还有Bootstrap和jQuery,React负责前端展现,jQuery主要是向服务器发送ajax请求. 后端使用Flask和MongoDB,为前端提供数据.这里主要关注前端,对于后端不做过多说明. 使用webpack,对js文件进行打包. About React React是facebook开发一个用于前段交互的Javasc

  • ReactJs快速入门教程(精华版)

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJs的风采吧~~ 文章有点长,耐心读完,你会有很大收获哦~   一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西

  • VueJs与ReactJS和AngularJS的异同点

    React && Vue React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式(Reactive)和组件化(Composable)的视图组件. 将注意力集中保持在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库. 由于有着众多的相似处,我们会用更多的时间在这一块进行比较.这里我们不只保证技术内容的准确性,同时也兼顾了平衡的考量.我们需要指出 React 比 Vue 更好的地方,像是他们的生态系统和丰富的自定义渲染器. React &

  • 使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    ReactJS是Facebook推出的产品.在2013年的Qcon大会(上海)上面,当时Facebook的前端工程师做过一次讲座,就专门介绍了ReactJS. ReactJS可以看做就是用来Render的.ReactJS是可以达到游戏级别的渲染,fps可以保持在60左右,相当的了不起,它做了一个虚拟dom tree加速了渲染过程,根据当时的数据说比angularjs快20%以上. 前沿 对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学

  • 由ReactJS的Hello world说开来

    这篇文章提供了代码实例和在React.js(一个Facebook工程师开发的被用于构建用户界面的Javascript库)中高水平的概念.这些概念会被详细的发表在下面的文章里.在此,我必须提示如果你是一名ReactJS专家并且感觉这些代码需要改善,请您把建议写信给我,我会及时适当的更新这篇文章/代码. 在我继续发表一些代码实例之前,我必须特别的提出:初学ReactJS会有一点困难,因为最近我一直在AngularJS上写代码.到现在为止,我需要承认他们之间在帮助我们做UI工作时有很大的不同.我将发表

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

    大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果: 注意这个组件需要ES6环境,最好使用NodeJS结合Webpack来打包:webpack --display-error-details --config webpack.config.js 此React版分页组件请亲们结合redux来使用比较方便,UI = Fn(State) 基本流程就是:用

  • vue2.0实现分页组件的实例代码

    最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的分页组件, 就自己写了一个, 效果如下: 该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己调整: 首先新建pagination.vue文件, 所有组件的代码都写在这里, 写这样的组件并没有什么太大的难度, 主要是解决父子组件之间值传递的问题 <template> <nav> <ul class="pagination"> <li :

  • JSP实现带查询条件的通用分页组件

    分页功能的代码就是这样的,在需要展示列表的页面,我们基本都需要加上分页功能,如果某天boss想要修改分页功能的样式,我们不能去一个一个的改吧. 下边给大家分享一个自己封装的通用分页组件. 1. 效果展示 2. 使用方式 1 )在需要显示分页信息的位置,直接引入pagination.jsp页面. <!-- 分页内容 --> <%@include file="/WEB-INF/decorators/pagination.jsp" %> <!-- 分页内容结束

  • springmvc+mybatis 做分页sql 语句实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="s

  • php分页函数完整实例代码

    本文分享一例php分页函数完整实例代码,使用此函数实现分页效果很不错.分享给大家供大家参考. 具体功能代码如下: <?php /* * Created on 2011-07-28 * 使用方法: require_once('mypage.php'); $result=mysql_query("select * from mytable", $myconn); $total=mysql_num_rows($result); //取得信息总数 pageDivide($total,10

  • log4j2 项目日志组件的实例代码

    在项目运行过程中,常常需要进行功能调试以及用户行为的跟踪和记录,部分人习惯使用System.out,但这并不建议,它仅仅是使用方便但不便于维护也无扩展性.相比log4j的话,log4j可以控制日志信息的输送目的地.输出格式以及级别等等,使我们能够更加细致地控制日志的生成过程. Log4j2是对Log4j1的升级,在性能和功能上有显著的改进,包括多线程中吞吐量的增强.占位符的支持.配置文件自动重新加载等 一.入门介绍 1.下载jar包 pox.xml <dependencies> <dep

  • 使用vue制作探探滑动堆叠组件的实例代码

    效果图如下所示: 前言 嗨,说起探探想必各位程序汪都不陌生(毕竟妹子很多),能在上面丝滑的翻牌子,探探的的堆叠滑动组件起到了关键的作用,下面就来看看如何用vue写一个探探的堆叠组件 一. 功能分析 简单使用下探探会发现,堆叠滑动的功能很简单,用一张图概括就是: 简单归纳下里面包含的基本功能点: 图片的堆叠 图片第一张的滑动 条件成功后的滑出,条件失败后的回弹 滑出后下一张图片堆叠到顶部 体验优化 根据触摸点的不同,滑动时首图有不同角度偏移 偏移面积判定是否成功滑出 二. 具体实现 有了归纳好的功

  • Vue自定义toast组件的实例代码

    写了两三天,终于把toast组件写出来了.不敢说是最好的设计,希望有更好思路的朋友可以在评论区给我意见!_(:з」∠)_ 第一步:写toast.vue,将样式之类的先定下来 <template> <div v-show="showToast" class="toast" :class="position"> <div class="toast_container" v-if="type=

  • 微信小程序动态添加view组件的实例代码

    在web中,我们动态添加DOM,可以用jQuery的方法,很简单.在微信小程序中怎么实现下面这么需求. 其中,里程数代表上一行到这一行地方的距离(这个不重要):要实现的就是点击增加途径地,就多一行,删除途径地,就少一行. 分析:添加的和删除的是同样的结构,只是数量不一样,所以考虑循环,用列表表示,增加就往这个列表push一个,删除就从列表pop一个. 主要代码如下: <view class="weui-cell weui-cell_input"> <view clas

  • vue.js 实现评价五角星组件的实例代码

    饿了么的五角星有三种形状,分别是实星,半星,空星 并且组件要能实现,这个五角星不同大小,评分也不一样,比如满分五颗星,四颗半星,四颗星等等.... 所以需要像组件传入一个大小:size,一个分数:score 代码如下: <template> <div class="star" :class="starType"> <span class="star-item" :class="itemClass"

随机推荐