【react 分页器】 基于react-virtualized组件的分页器
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组件的分页器的更多相关文章
- react应用(基于react脚手架)
使用create-react-app创建react应用 react脚手架 1) xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 a. 包含了所有需要的配置 b. 指定好了所有的依赖 ...
- RSuite 一个基于 React.js 的 Web 组件库
RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...
- 基于React Native的Material Design风格的组件库 MRN
基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://git ...
- 基于 React 实现一个 Transition 过渡动画组件
过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...
- 基于 react 的Java web 应用—— 组件复用(后续需更新)
前言 实习第二周,被告知要用React与导师进行基于React的Javaweb 的开发,jinzhangaaaaa~由于React 这款框架没学过,看了一峰老师的基础入门教程,硬着头皮开始上了... ...
- 基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。
react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...
- 基于React.js网页版弹窗|react pc端自定义对话框组件RLayer
基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react. ...
- 基于react hooks,zarm组件库配置开发h5表单页面
最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方 ...
- 如何基于 React 封装一个组件
如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary , ...
随机推荐
- [转]C++中的三种继承public,protected,private
链接:http://www.cnblogs.com/BeyondAnyTime/archive/2012/05/23/2514964.html
- jquery 取第一个兄弟节点
1.HTML <table> <tr> <td>1</td> <td>abc</td> <td>def</td ...
- linux如何查看CPU,内存,机器型号,网卡信息
查看CPU信息(型号)# cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c 8 Intel(R) Xeon(R) CPU ...
- Bootstrap学习笔记(6)--导航居中
说明:没找到好办法 <div class="row"> <ul class="nav nav-pills col-md-offset-4"&g ...
- MapReduce编程实例6
前提准备: 1.hadoop安装运行正常.Hadoop安装配置请参考:Ubuntu下 Hadoop 1.2.1 配置安装 2.集成开发环境正常.集成开发环境配置请参考 :Ubuntu 搭建Hadoop ...
- [爬虫]Python爬虫基础
一.什么是爬虫,爬虫能做什么 爬虫,即网络爬虫,大家可以理解为在网络上爬行的一直蜘蛛,互联网就比作一张大网,而爬虫便是在这张网上爬来爬去的蜘蛛咯,如果它遇到资源,那么它就会抓取下来.比如它在抓取一个网 ...
- 验证:record项元的多少影响修改速度。
验证erlang官网提供的思想:record的修改是复制. -module (test_record). -record (record_5,{ aa1 = 0, aa2 = 0, aa3 = 0, ...
- jQuery实现瀑布流布局详解(PC和移动端)
首先我们将如下样式的若干个单元写进body中,并将“box”向左浮动: <div class="box"> <img class="img" ...
- “几何画板+MathType”双11组合特价,优惠多多
工欲善其事,必先利其器!几何画板和MathType作为数学老师必备工具,在数学教学中起着非常重要的作用.为回馈老师们做出的伟大贡献,在双11狂欢节期间,MathType和几何画板迎来史上第一次组合特惠 ...
- node 下好用的工具
1. supervisor Node Supervisor is used to restart programs when they crash. Node Supervisor 是用来当程序崩溃时 ...