Javascript 如何在我的table.js页面中包含分页?
我正在从事一个项目,该项目从API获取数据并以表格的形式显示数据。这个项目运作良好。我面临分页问题。 我希望在一个页面上最多显示5个项目,并执行一些操作,使我的应用程序能够基于提取的数据创建多个页面。 这是我的posts.js页面Javascript 如何在我的table.js页面中包含分页?,javascript,reactjs,Javascript,Reactjs,我正在从事一个项目,该项目从API获取数据并以表格的形式显示数据。这个项目运作良好。我面临分页问题。 我希望在一个页面上最多显示5个项目,并执行一些操作,使我的应用程序能够基于提取的数据创建多个页面。 这是我的posts.js页面 import React from 'react' import MyTable from './table' export default class Posts extends React.Component { constructor(props) {
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}
/>
)
}
}
从“React”导入React
从“./table”导入MyTable
导出默认类Posts扩展React.Component{
建造师(道具){
超级(道具);
此值为。列=[
{
姓名:“ID”,
关键字:“id”
}, {
姓名:“职务”,
关键词:“标题”
}, {
姓名:“身体”,
关键词:“身体”
}
];
此参数为.maxItems=5;
};
状态={
编号:0,,
表:[],
isFetching:真的
};
componentDidMount(){
取回(“https://jsonplaceholder.typicode.com/posts")
.then(response=>response.json())
。然后(res=>{
this.setState({table:res,isFetching:false});
});
}
render(){
返回this.state.isFetching
? (
)
: (
)
}
}
这是我的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>
)
}
}
从“React”导入React
导出默认类MyTable扩展React.Component{
建造师(道具){
超级(道具);
}
createTable=()=>{
让tableHeader=
{this.props.columns.map(column=>{
返回
{column.name}
})}
;
设tableRows=[];
for(设i=this.props.pgNo*this.props.maxItems;i{
返回
{this.props.data[i][column.key]}
})}
tableRows.push(行)
}
设tableBody={tableRows};
返回{tableHeader}{tableBody};
}
render(){
返回(
{this.createTable()}
)
}
}
也请随时指出我在此代码中所犯的任何错误。非常感谢所有帮助。这是正确的代码 用户页面
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}/>
)
)
}
}
类表扩展了React.Component{
建造师(道具){
超级(道具);
此值为。列=[
{
姓名:“ID”,
关键字:“id”
}, {
姓名:“姓名”,
键:“名称”
}, {
名称:“用户名”,
关键字:“用户名”
}, {
名称:“电子邮件”,
关键字:“电子邮件”
}, {
名称:“网站”,
关键词:“网站”
}
];
此参数为.maxItems=5;
};
状态={
编号:0,,
表:[],
url:“/user”
};
componentDidMount(){
this.props.fetchuser()
console.log(this.props.user);
console.log(“columns”,this.columns);
}
render(){
console.log(this.props.user);
返回(
this.props.user.length==0?
(
) :
(
)
)
}
}
表页
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>
)
}
}
导出默认类MyTable扩展React.Component{
建造师(道具){
超级(道具);
此.state={
当前页面:this.props.pgNo,
详情:[],
id:null
}
这是MaxPages=0;
}
PrevButton(){
if(this.state.currentPage==0){
返回(空);
}否则{
返回(
{this.setState({currentPage:this.state.currentPage-1}}}>
上一页
);
}
}
下一个按钮(){
if(this.state.currentPage===this.MaxPages-1){
返回(空);
}否则{
返回(
{
这是我的国家({
currentPage:this.state.currentPage+1
})
}}>
下一页
);
}
}
AddButton(){
返回(
);
}
createTable=()=>{
让tableHeader=
{this.props.columns.map(column=>{
返回
{column.name}
})}
;
this.state.number=this.state.number+1;
设tableRows=[];
对于(设i=this.state.currentPage*this.props.maxItems;(i<(this.state.currentPage+1)*this.props.maxItems)和&(i){
返回(
{this.props.data[i][column.key]}
)
})}
tableRows.push(行)
}
for(设i=0;i