我正在使用create-react-app和react-bootstrap构建一个基本的react应用程序。我正在使用react-bootstrap https://react-bootstrap.github.io/components/table/中的表来显示信息。我试图让分页为表工作,但我不确定如何绕过它来使用表。以下是我的组件的代码片段:我添加了react-bootstrap中的分页代码段,它只在底部显示分页页脚,但实际上并不对结果进行分页。App.js
import React, { Component } from 'react';
import Table from 'react-bootstrap/lib/Table';
import Pagination from 'react-bootstrap/lib/Pagination';
export class App extends Component {
renderList() {
return(
<Table striped hover bordered condensed>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Forks</th>
<th>Clone URL</th>
</tr>
</thead>
<tbody>
{this.state.response.map((object) => {
return (
<tr>
<td><a onClick={this.handleClick.bind(this,object)}>{object.name} </a></td>
<td>{object.description}</td>
<td><Glyphicon glyph="cutlery" /> {object.forks_count}</td>
<td>{object.clone_url}</td>
</tr>
);
})}
</tbody>
</Table>
);
}
renderPagination() {
let items = [];
for (let number = 1; number <= 10; number++) {
items.push(
<Pagination.Item>{number}</Pagination.Item>
);
}
return (
<Pagination bsSize="small">{items}</Pagination>
);
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Netflix Repositories</h1>
</header>
{this.renderList()}
<CommitList ref={(ref) => this.commitList = ref}
show={this.state.show}
commits={this.state.commits} />
{this.renderPagination()}
</div>
);
}
}
如何对表格上的结果进行分页?
2条答案
按热度按时间ozxc1zmp1#
有两种方法来处理这个问题:
1.仅使用前端分页:得到你的全部结果,并将你的结果与列表大小分开,例如10,假设你总共有50个列表项,所以你有50/10 == 5页。对于每个分页项,添加一个“onClick”到它,并改变你的显示页面。
1.同时使用前端和后端分页:只获取结果的特定部分,并在前端处理它。(搜索Spring JPA Pagination以获取更多详细信息。)
klsxnrf12#
使用Antd设计响应表和分页这里的链接:https://ant.design/components/pagination/