javascript - 如何在我的 table.js 页面中包含分页?
问题描述
我正在开发一个从 API 获取数据并以表格形式显示的项目。该项目运行良好。我面临分页问题。我想在一个页面上显示最多 5 个项目,并做一些事情,允许我的应用程序根据获取的数据创建多个页面。这是我的posts.js 页面。
import React from 'react'
import MyTable from './table'
export default class Posts extends React.Component {
constructor(props) {
super(props);
this.columns = [
{
name: "ID",
key: "id"
}, {
name: "Title",
key: "title"
}, {
name: "Body",
key: "body"
}
];
this.maxItems = 5;
};
state = {
pgNo: 0,
table: [],
isFetching: true
};
componentDidMount() {
fetch("https://jsonplaceholder.typicode.com/posts")
.then(response => response.json())
.then(res => {
this.setState({table: res, isFetching: false});
});
}
render() {
return this.state.isFetching
? (
<div
className="loader"
style={{
marginLeft: "50%"
}}>
<img src="/assets/index.svg"/>
</div>
)
: (
<MyTable pgNo ={this.state.pgNo}
maxItems = {this.maxItems}
columns={this.columns}
data={this.state.table}
/>
)
}
}
这是我的 table.js 页面
import React from 'react'
export default class MyTable extends React.Component {
constructor(props) {
super(props);
}
createTable = () => {
let tableHeader = <thead>
<tr>
{this.props.columns.map(column => {
return <th key={column.name}>
{column.name}
</th>
})}
</tr>
</thead>;
let tableRows = [];
for (let i = this.props.pgNo*this.props.maxItems ; i <(this.props.pgNo + 1)*this.props.maxItems-1; i++) {
let row = <tr key={i}>
{this.props.columns.map(column => {
return <td key={column.key}>
{this.props.data[i][column.key]}
</td>
})}
</tr>
tableRows.push(row)
}
let tableBody = <tbody>{tableRows}</tbody>;
return <table
className="table table-bordered"
style={{
marginLeft: "33%",
marginRight: "5%"
}}>{tableHeader}{tableBody}</table>;
}
render() {
return (
<div className="col-md-6">
<div className="container-fluid">
<div className="content">
{this.createTable()}
</div>
</div>
</div>
)
}
}
也请随时指出我在此代码中犯的任何错误。感谢所有帮助。
解决方案
这是正确的代码
用户页面。
class Table extends React.Component {
constructor(props) {
super(props);
this.columns = [
{
name: "ID",
key: "id"
}, {
name: "Name",
key: "name"
}, {
name: "Username",
key: "username"
}, {
name: "Email",
key: "email"
}, {
name: "Website",
key: "website"
}
];
this.maxItems = 5;
};
state = {
pgNo: 0,
table: [],
url:"/user"
};
componentDidMount() {
this.props.fetchuser()
console.log(this.props.user);
console.log("columns",this.columns);
}
render() {
console.log(this.props.user);
return (
this.props.user.length === 0 ?
( <div
className="loader"
style={{
marginLeft: "50%"
}}>
<img src="/assets/index.svg"/>
</div>) :
(
<MyTable pgNo ={this.state.pgNo}
maxItems = {this.maxItems}
columns={this.columns}
data={this.props.user}
url={this.state.url}/>
)
)
}
}
表页。
export default class MyTable extends React.Component {
constructor(props) {
super(props);
this.state = {
currentPage: this.props.pgNo,
details: [],
id: null
}
this.MaxPages = 0;
}
PrevButton() {
if (this.state.currentPage === 0) {
return (null);
} else {
return (
<button
className="btn btn-primary"
type="button"
key={this.state.currentPage}
style={{
float: "left"
}}
onClick=
{ () => { this.setState({ currentPage: this.state.currentPage - 1 }) } }>
Previous Page
</button>
);
}
}
NextButton() {
if (this.state.currentPage === this.MaxPages - 1) {
return (null);
} else {
return (
<button
className="btn btn-primary"
style={{
float: "right"
}}
key={this.props.pgNo}
onClick={() => {
this.setState({
currentPage: this.state.currentPage + 1
})
}}>
Next Page
</button >
);
}
}
AddButton() {
return (
<Link to={`${this.props.url}/addnew${this.props.url}`}>
<button
style={{
float: "right"
}}
className="btn btn-primary"><Faplus/>
</button>
</Link>
);
}
createTable = () => {
let tableHeader = <thead>
<tr>
{this.props.columns.map(column => {
return <th key={column.name}>
{column.name}
</th>
})}
</tr>
</thead>;
this.state.number = this.state.number + 1;
let tableRows = [];
for (let i = this.state.currentPage * this.props.maxItems; (i < (this.state.currentPage + 1) * this.props.maxItems) && (i <= this.props.data.length); i++) {
let row = <tr key={i}>
{this
.props
.columns
.map(column => {
return (
<td key={column.key}>
<Link to={`${this.props.url}/details/${i + 1}`}>
{this.props.data[i][column.key]}</Link>
</td>
)
})}
</tr>
tableRows.push(row)
}
for (let i = 0; i <= Math.ceil(this.props.data.length / this.props.maxItems); i++) {
this.MaxPages = i;
}
let tableBody = <tbody className="name">{tableRows}</tbody>;
return <table
style={{
marginTop: "10%",
width: "100%"
}}>{tableHeader}{tableBody}
</table>;
}
render() {
return (
<div className="row">
<div className="col-md-2 offset-md-10">{this.AddButton()}</div>
<div className="col-md-8 offset-md-3 table ">
{this.createTable()}
</div>
<div className="col-md-8 offset-md-3">
{/* {this.FirstButton()} */}
{this.PrevButton()}
{this.NextButton()}
{/* {this.LastButton()} */}
</div>
</div>
)
}
}
推荐阅读
- javascript - CSS背景图片幻灯片
- android - 主activity.kt中的Android Studio新项目错误(基本活动)
- ios - iOS 14 在 Flutter 上使用带有 google admob 的横幅广告时崩溃
- azure - 使用 Azure 逻辑应用将 JSON 对象转换为 JSON 时,是否可以使用自定义 Liquid 筛选器?
- string - 如何计算字符串中字符的第 n 次出现(位置)?
- javascript - 我想在网站上执行自动点击?
- python - Python 聊天服务器客户端错误 - 无法获取本地颁发者证书,即使使用中间体也无法验证第一个证书
- windows - 是否可以在 Windows 8.1 中自定义任务栏以显示视频?
- android - 数据库未更新(SQLITE 和 Dart)
- c# - 使用来自 html 的解析数据播种数据库