react-virtualized 组件本身没有提供分页器功能,见这个issue:https://github.com/bvaughn/react-virtualized/issues/24

如果想给react-virtualized实现的表格添加分页器功能,需要自己手动实现一个分页器,网上有一个参考代码:

https://codesandbox.io/s/mm3kvjo0z9

分页器代码:

Paginator.js

import React from 'react'
import { Button } from 'semantic-ui-react' const BetweenButton = () => <Button content='...' style={{ cursor: 'default' }} /> const Paginator = ({ currentPage, onPageChange, range = 3, pageCount }) => {
const renderedPages = [...Array(range * 2 + 1).keys()]
.map(i => currentPage - range + i)
.filter(i => i > 0 && i <= pageCount) const showStart = currentPage - range > 1
const showEnd = currentPage + range < pageCount return (
<Button.Group compact>
{showStart && (
[
<Button content={1} onClick={() => onPageChange(1)} />,
<BetweenButton />
]
)}
{renderedPages.map(page => (
<Button
key={page}
onClick={() => onPageChange(page)}
content={page}
primary={currentPage === page}
/>
))}
{showEnd && (
[
<BetweenButton />,
<Button content={pageCount} onClick={() => onPageChange(pageCount)} />
]
)}
</Button.Group>
)
} export default Paginator

使用该分页器:

index.js

import React, { Component } from 'react'
import { render } from 'react-dom'
import { Icon, Header, Button } from 'semantic-ui-react'
import { Column } from 'react-virtualized'
import styled from 'styled-components' import VirtualizedTable from './VirtualizedTable'
import Paginator from './Paginator'
import { getRows } from './utils' const count = 100000
const rows = getRows(count) const Wrapper = styled.div`
margin: 10px;
` const CountCell = ({ cellData }) => (
<div>
<Icon name='mail' color='green' />{cellData}
</div>
) class App extends Component {
constructor() {
super()
this.state = {
page: 1,
perPage: 18,
scrollToIndex: undefined
}
this.handleRowsScroll = this.handleRowsScroll.bind(this)
this.handlePageChange = this.handlePageChange.bind(this)
} handleRowsScroll({ stopIndex }) {
this.setState(prevState => {
const page = Math.ceil(stopIndex / prevState.perPage)
return { page, scrollToIndex: undefined }
})
} handlePageChange(page) {
this.setState(prevState => {
const scrollToIndex = (page - 1) * prevState.perPage
return { page, scrollToIndex }
})
} render() {
const { page, perPage, scrollToIndex } = this.state const headerHeight = 30
const rowHeight = 40
const height = rowHeight * perPage + headerHeight
const rowCount = rows.length
const pageCount = Math.ceil(rowCount / perPage) return (
<Wrapper>
<Header as='h1'>React virtualized table with pagination</Header>
<p>
<Paginator
pageCount={pageCount}
currentPage={page}
onPageChange={this.handlePageChange}
/>
</p>
<VirtualizedTable
rowHeight={rowHeight}
headerHeight={headerHeight}
height={height}
rowCount={rowCount}
rows={rows}
onRowsRendered={this.handleRowsScroll}
scrollToIndex={scrollToIndex}
scrollToAlignment='start'
>
<Column label='Id' dataKey='id' width={100} />
<Column label='Name' dataKey='name' width={250} />
<Column label='Count' dataKey='count' width={100} cellRenderer={CountCell} />
</VirtualizedTable>
</Wrapper>
)
}
} render(<App />, document.getElementById('root'));

这个分页器没有设置一页多少行的功能,也没有直接跳转到多少行的功能,我给它加了这两个功能:

在index.js中加入如下代码:

使用了两个input受控组件,关于受控组件:https://segmentfault.com/a/1190000012404114

          <Paginator pageCount={pageCount} currentPage={currentPage} onPageChange={this.handlePageChange} />

          <input type="number" min="1" max="100" value={this.state.perPage} onChange={(e) => {
if(e.target.value>=1&&e.target.value<=100){
this.setState({perPage: e.target.value, currentPage:1,});
}else{
alert('the rows on a page should between 1 and 100');
}
}} /> rows on a page; jump to page
<input type="number" min="1" value={this.state.currentPage} onChange={(e)=>{
if(e.target.value>=1 && e.target.value<=pageCount){
this.setState({currentPage:e.target.value});
}else{
alert('the page number should exist!')
}
}}/>

【react 分页器】 基于react-virtualized组件的分页器的更多相关文章

  1. react应用(基于react脚手架)

    使用create-react-app创建react应用 react脚手架 1) xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 a. 包含了所有需要的配置 b. 指定好了所有的依赖 ...

  2. RSuite 一个基于 React.js 的 Web 组件库

    RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...

  3. 基于React Native的Material Design风格的组件库 MRN

    基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://git ...

  4. 基于 React 实现一个 Transition 过渡动画组件

    过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...

  5. 基于 react 的Java web 应用—— 组件复用(后续需更新)

    前言 实习第二周,被告知要用React与导师进行基于React的Javaweb 的开发,jinzhangaaaaa~由于React 这款框架没学过,看了一峰老师的基础入门教程,硬着头皮开始上了... ...

  6. 基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。

    react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...

  7. 基于React.js网页版弹窗|react pc端自定义对话框组件RLayer

    基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react. ...

  8. 基于react hooks,zarm组件库配置开发h5表单页面

    最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方 ...

  9. 如何基于 React 封装一个组件

    如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary , ...

随机推荐

  1. [转]C++中的三种继承public,protected,private

    链接:http://www.cnblogs.com/BeyondAnyTime/archive/2012/05/23/2514964.html

  2. jquery 取第一个兄弟节点

    1.HTML <table> <tr> <td>1</td> <td>abc</td> <td>def</td ...

  3. linux如何查看CPU,内存,机器型号,网卡信息

    查看CPU信息(型号)# cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c      8  Intel(R) Xeon(R) CPU     ...

  4. Bootstrap学习笔记(6)--导航居中

    说明:没找到好办法 <div class="row"> <ul class="nav nav-pills col-md-offset-4"&g ...

  5. MapReduce编程实例6

    前提准备: 1.hadoop安装运行正常.Hadoop安装配置请参考:Ubuntu下 Hadoop 1.2.1 配置安装 2.集成开发环境正常.集成开发环境配置请参考 :Ubuntu 搭建Hadoop ...

  6. [爬虫]Python爬虫基础

    一.什么是爬虫,爬虫能做什么 爬虫,即网络爬虫,大家可以理解为在网络上爬行的一直蜘蛛,互联网就比作一张大网,而爬虫便是在这张网上爬来爬去的蜘蛛咯,如果它遇到资源,那么它就会抓取下来.比如它在抓取一个网 ...

  7. 验证:record项元的多少影响修改速度。

    验证erlang官网提供的思想:record的修改是复制. -module (test_record). -record (record_5,{ aa1 = 0, aa2 = 0, aa3 = 0, ...

  8. jQuery实现瀑布流布局详解(PC和移动端)

    首先我们将如下样式的若干个单元写进body中,并将“box”向左浮动: <div class="box">  <img class="img" ...

  9. “几何画板+MathType”双11组合特价,优惠多多

    工欲善其事,必先利其器!几何画板和MathType作为数学老师必备工具,在数学教学中起着非常重要的作用.为回馈老师们做出的伟大贡献,在双11狂欢节期间,MathType和几何画板迎来史上第一次组合特惠 ...

  10. node 下好用的工具

    1. supervisor Node Supervisor is used to restart programs when they crash. Node Supervisor 是用来当程序崩溃时 ...