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. 第八课:不一样的链表 linux链表设计哲学 5星级教程

    这一课最后实现的链表,和普通链表不同,借鉴了linux内核链表的思想,这也是企业使用的链表. 基础介绍: 顺序表的思考 顺序表的最大问题是插入和删除需要移动大量的元素!如何解决?A:在线性表数据元素之 ...

  2. java ssm框架入门(二)添加语言滤器

    使用过滤器是在web.xml中使用filter,以下是码过滤器,过滤所有资源的使用 web.xml <filter> <filter-name>setCharactor< ...

  3. Project Euler:Problem 34 Digit factorials

    145 is a curious number, as 1! + 4! + 5! = 1 + 24 + 120 = 145. Find the sum of all numbers which are ...

  4. OpenGL ES 简单教程

    什么是OpenGL ES? OpenGL ES (为OpenGL for Embedded System的缩写) 为适用于嵌入式系统的一个免费二维和三维图形库. 为桌面版本号OpenGL 的一个子集. ...

  5. Hadoop中MapReduce计算框架以及HDFS可以干点啥

    我准备学习用hadoop来实现下面的过程: 词频统计 存储海量的视频数据 倒排索引 数据去重 数据排序 聚类分析 ============= 先写这么多

  6. Redis常用命令解析——INFO, MONITOR, SLOWLOG

    1. INFO info指令返回服务器相关信息,包括: server: General information about the Redis server clients: Client conne ...

  7. PHP多进程编程(2):管道通信

    一个进程如果是个人英雄主义,那么多进程就是集体主义.(不严格区分多进程 和 多线程的差别) 你不再是一个独行侠,而是一个指挥家. 独来独往,非常自由自在,但是,很多时候,不如众人拾柴火焰高. 这就是我 ...

  8. 使用GitHub建立个人网站

    使用GitHub建立个人网站 1 Git简介 2 为什么使用Github Pages 3 创建Github Pages 3.1 安装git工具. 3.2 两种pages模式 3.3 创建步骤 3.4 ...

  9. MyBatis Generator 学习

    根据数据库,自动生成 VO.XML或者DAO的工具. 同大多数工具(或者框架)一样,需要加载一个配置文件,然后根据配置文件中的内容连接数据库,访问其中的表内容,最后生成实体类以及MAPPER. 占位用 ...

  10. android DialogFragment 回调到 Fragment

    google 从3.0開始就引入了 Fragment 概念,用 Fragment 取代多 Activity,假设你还停留在 Activity 时代,那你就面壁去吧! Fragment 是好用,可是又几 ...