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!')
}
}}/>
05-18 02:25