javascript - 如何使用 react-table 和 react-paginate 组件实现纯客户端分页而不向服务器请求响应?
问题描述
我在 componentDidMount 方法中使用来自服务器的一组对象,然后将其保存到状态中。
如果我从选择组件更改页面大小一切正常,但页码点击不起作用。
例如,我将页面大小设置为 20。我的数据数组长度等于 29,所以我有 2 页。在反应表中,有 20 行,并选择了第 1 页。当我选择第 2 页时,没有任何反应。它应该显示剩余的 9 行,但没有任何反应。
我知道,当点击另一个页面时,通常与页面大小对应的数据量必须来自服务器。但是我被赋予了一个任务,即我应该在不向服务器请求的情况下实现所有内容。
我该如何实现呢?您的任何帮助都会很有用,在此先感谢您!这是我的代码:
constructor:
perPage: JSON.parse(localStorage.getItem('detailsTablePerPageOrderEdit')) || 20,
pageRanges: [20, 50, 100, 200, 300, 500, 1000],
<CustomReactTable
columns={columnsDetails}
tableHeight={_.isEmpty(this.state.details) ? '25vh' : '80%'}
data={this.state.details}
onTrClick={(data) => this.handleDetailSelect(data)}
pageSize={this.state.perPage}
/>
<PaginationRow
changePerPage={(pageSize) => this.onPageSizeChange(pageSize)}
count={this.state.details.length}
handlePageChange={(page) => this.handlePageChange(page)}
page={this.state.page}
perPage={this.state.perPage}
pageRanges={this.state.pageRanges}
/>
handlePageChange = (page) => {
this.setState({ page: page.selected + 1 });
//I think, here should be some code to implement pagination
};
onPageSizeChange = pageSize => {
console.log(typeof pageSize);
localStorage.setItem('detailsTablePerPageOrderEdit', pageSize);
this.setState({
page: 1,
perPage: pageSize
});
};
paginationRow 组件:
import React from 'react';
import {Row, Col} from 'react-bootstrap';
import ReactPaginate from 'react-paginate';
import PaginationCount from './PaginationCount';
import i18n from '../../i18n';
export default (props) => {
if(props.count <= 0 || props.page < 0 || props.perPage < 0){
return null;
}
const fromItem = (props.page - 1) * props.perPage + 1;
let toItem = props.page * props.perPage;
toItem = toItem > props.count ? props.count : toItem;
const handlePageSizeChange = e => {
props.changePerPage && props.changePerPage(e.target.value);
};
const pageRanges = props.pageRanges || [50, 100, 200, 300, 500, 1000];
return(
<Row>
<div className="col padded">
<ReactPaginate
activeClassName="active"
breakLabel={<a href="#!">...</a>}
containerClassName="pagination"
disableInitialCallback
forcePage={props.page - 1}
initialPage={props.page - 1}
marginPagesDisplayed={5}
nextLabel={i18n.t('PaginationRow.next_label')}
onPageChange={props.handlePageChange}
pageCount={props.count/props.perPage}
pageRangeDisplayed={5}
previousLabel={i18n.t('PaginationRow.previous_label')}
subContainerClassName="pages pagination"
/>
</div>
{props.perPage ?
<div className="col col-md-auto ">
<div className="form-group">
<select
className="form-control paginationSelect" id="exampleFormControlSelect1"
name="perPage"
onChange={handlePageSizeChange}
value={props.perPage}
>
{pageRanges.map(r => (<option key={r} value={r}>{r}</option>))}
</select>
</div>
</div> : null
}
<div className="col text-nowrap">
<div className="paginationTextInfo">
<PaginationCount
itemFrom={fromItem}
itemTo={toItem}
totalCount={props.count}
/>
</div>
</div>
</Row>
);
};
解决方案
看起来您必须根据页面状态(当前分页页面)修改结果数组。
使用 FE array.slice 函数:
function paginate (array, page_size, page_number) {
return array.slice((page_number-1) * page_size, (page_number) * page_size);
}
推荐阅读
- python - 我想用下一行字更改“未命名”列的列名。我对python有点陌生
- ios - 启动本地服务器 iOS 并将其加载到 WKWebView
- android - .findViewById() 返回 null
- numpy - Numpy、OOP 和可调用对象
- azure-active-directory - 在创建帐户之前使用 ADB2C 电话因素技术配置文件来验证电话号码
- regex - awk 正则表达式 (REGEX) 从文件中获取电话号码
- python - 如何在只有几列的行中替换值而不在 Pandas 中合并
- r - 如何使用 readtext 将多个 JSON 文件加载到 quanteda 语料库中?
- regex - 匹配包含括号的 RegEx 文本字符串
- javascript - 如何在纯 JavaScript 中选择嵌套元素?