![](/img/trans.png)
[英]How can i add a table first colum heading. whole table is coming from a table.js library
[英]How can I include Pagination in my table.js page?
我正在研究一個從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>
)
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.