想要动态处理有关分页的页码显示:ReactJS [英] Want to dynamically handle display of page numbers with respect to Pagination : ReactJS
问题描述
我有一些分页逻辑可以正常工作，唯一的问题是我只能显示它并有固定数量的页面可供选择.现在我把它放到5页上，但是我希望它根据总记录来动态更改..
I have some pagination logic working just fine, only issue is I can only get it to show and fixed number of pages to choose from. Right now I have put it to 5 pages, but I would like it to change dynamically based on total records..
所以可以说我有100条记录，每页限制为10条.将有10页. 现在，我只能以这种方式显示它
So lets say I have 100 records and the limit per page is 10 . There will be 10 pages. Right now I can only get it to show this way
第一页上一页1 2 3 4 5 6 7 8 9 10下一页末页
First Prev 1 2 3 4 5 6 7 8 9 10 Next Last
但是我想要的是根据记录和您所在的页面动态更改分页.
But what I want is the paging to change dynamically based on records and based on what page you are at.
所以看起来更像这样:
在第1页: 1 2 3 4 5下一页末页
At page 1: 1 2 3 4 5 Next Last
在第5页:首页上一页3 4 5 6 7下一页末页
At page 5: First Prev 3 4 5 6 7 Next Last
在第3页:首页上一页1 2 3 4 5下一页末页
At page 3: First Prev 1 2 3 4 5 Next Last
我尝试了很多事情，但似乎找不到正确的解决方案.有人可以告诉我如何使用当前的代码吗?
I have tried a lot of things, but can not seem to find the right solution. Can someone tell me how to do on current code I have ?
我们将不胜感激.
到沙箱的链接: https://codesandbox.io/s/react-typescript- nvffv
import * as React from "react";
import Pagination from "./Pagination";
import * as ReactDOM from "react-dom";
const NO_OF_RECORDS_PER_PAGE = 10;
interface IState {
length: number;
currentPage: number;
}
interface IProps {}
export default class App extends React.Component<IProps, IState> {
constructor(props: any) {
super(props);
this.state = {
length: 0,
currentPage: 1
};
}
componentDidMount() {
this.setState({ length: 98 });
}
handlePagination = (fromIndex: number, noOfRecords: number) => {
//Pagination logic here
//console.log(fromIndex, noOfRecords);
};
render() {
return (
<Pagination
dataCount={this.state.length}
currentPage={this.state.currentPage}
handlePagination={this.handlePagination}
perPageCount={NO_OF_RECORDS_PER_PAGE}
/>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
分页组件
import * as React from "react";
interface IProps {
dataCount: number;
handlePagination(fromIndex: number, noOfRecords: number): any;
perPageCount: number;
}
interface IState {
pages: number;
fromIndex: number;
currentPage: number;
}
export default class PaginationComponent extends React.Component<
IProps,
IState
> {
constructor(props: any) {
super(props);
this.state = {
pages: this.findNumberOfPages(),
fromIndex: 0,
currentPage: 1
};
}
componentDidUpdate(prevProps: any) {
if (prevProps.dataCount !== this.props.dataCount) {
this.setState({ pages: this.findNumberOfPages() });
}
}
findNumberOfPages = () => {
return Math.ceil(this.props.dataCount / this.props.perPageCount);
};
setOffset = (value: number) => {
let fromIndex = this.getFromIndex(
value,
this.props.perPageCount,
this.props.dataCount
);
this.setState({ fromIndex, currentPage: value }, () =>
this.props.handlePagination(this.state.fromIndex, this.props.perPageCount)
);
};
getFromIndex = (page_no: number, per_page: number, total_length: number) => {
return (
+page_no &&
+page_no <= Math.ceil(total_length / per_page) &&
per_page * --page_no
);
};
renderPageNumbers = () => {
const numberOfPages = this.findNumberOfPages();
let pages = [];
for (let i = 1; i <= numberOfPages; i++) {
pages.push(
<span
key={i}
className="margin-wd-10"
onClick={() => this.setOffset(i)}
style={{ cursor: "pointer" }}
>
{i}
</span>
);
}
return pages;
};
renderPrevButton = () => {
return (
<>
{this.state.currentPage > 1 ? (
<button
style={{ cursor: "pointer" }}
onClick={() => this.setOffset(this.state.currentPage - 1)}
>
<
</button>
) : (
<button style={{ cursor: "pointer" }} disabled>
<
</button>
)}
</>
);
};
renderNextButton = () => {
return (
<>
{this.state.currentPage < this.state.pages ? (
<button
style={{ cursor: "pointer" }}
onClick={() => this.setOffset(this.state.currentPage + 1)}
>
>
</button>
) : (
<button style={{ cursor: "pointer" }} disabled>
>
</button>
)}
</>
);
};
renderFirstButton = () => {
return (
<>
{this.state.currentPage > 1 ? (
<button
style={{ cursor: "pointer" }}
onClick={() => this.setOffset(1)}
>
First
</button>
) : (
<button style={{ cursor: "pointer" }} disabled>
First
</button>
)}
</>
);
};
renderLastButton = () => {
return (
<>
{this.state.currentPage < this.state.pages ? (
<button
style={{ cursor: "pointer" }}
onClick={() => this.setOffset(this.state.pages)}
>
Last
</button>
) : (
<button style={{ cursor: "pointer" }} disabled>
Last
</button>
)}
</>
);
};
render() {
return (
<>
<div>
{this.renderFirstButton()}
{this.renderPrevButton()}
{this.renderPageNumbers()}
{this.renderNextButton()}
{this.renderLastButton()}
</div>
</>
);
}
}
推荐答案
检查是否适合您.我已经更改了renderPageNumbers，使其仅显示从currentPage到currentPage + 5. 5在这里是随机的.您可以选择任何窗口.或通过道具传递它，使其更具动态感.
Check if this works for you. I've changed the renderPageNumbers so that it only displays from currentPage to currentPage + 5. The 5 here is random. You can choose any window. Or pass it from a prop to make it more dynamic.
renderPageNumbers = () => {
const numberOfPages = this.findNumberOfPages();
let pages = [];
const {currentPage} = this.state;
for (
let i = currentPage;
(i <= currentPage + 4) && (i < numberOfPages);
i++
) {
pages.push(
<span
key={i}
className="margin-wd-10"
onClick={() => this.setOffset(i)}
style={{ cursor: "pointer" }}
>
{i}
</span>
);
}
return pages;
};
指向沙盒的链接.我不知道它是否被保存. https://codesandbox.io/s/react-typescript-b220b
The link to sand box. I don't know if it's saved or not. https://codesandbox.io/s/react-typescript-b220b
这篇关于想要动态处理有关分页的页码显示:ReactJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
