时间戳

首页 > 解决方案 > 我如何对表格进行分页

react-native - 我如何对表格进行分页

问题描述

我有以下代码来显示来自 json 文件的数据，我有超过 500 条记录，我想每页显示 10 条记录。这是我在 [code pen][1] 中的项目。我尝试了 react-pagination 库，但这不起作用。做这个的最好方式是什么？打开以使用推荐的任何库——我几乎尝试了所有库。

这是我的代码的样子

标签： react-native

解决方案

我敢肯定有一百种不同的方法可以做到这一点，但只是为了教授机制的概念，这里有一个非常手动的版本：

  {this.state.filteredData
    .slice(this.state.activePage * 10, (this.state.activePage + 1) * 10)
    .map(results => ( ...
  ))}

.....

  {/*Pagination goes here */}

  <button onClick={() => {this.setState({activePage: this.state.activePage - 1})}} >
    prev</button>
  <button onClick={() => {this.setState({activePage: this.state.activePage + 1})}} >
    next</button>

activePage也就是说，在将数据映射到 DOM 元素之前，您只需获取数据的一部分，并且用于前进或后退的按钮只需通过设置您已经拥有的状态变量来选择该切片。

推荐阅读