I'm trying to add a DOTS to my pagination table, so I started with some totus to get my data from an asp api as a JSON file then I displayed it on a table but my data was too big, which obligated me to use the pagination
in my pagination I was confronted with the same problem which is the number of pages, I had a lot of pages (2000 pages)
this is my function who displays the pages
`showPagination = () => {
const { pageNumbers,postsPerPage, vehicules } = this.state;
const totalPosts = vehicules.length;
for(let i = 1; i<=Math.ceil(totalPosts/postsPerPage); i++){
pageNumbers[i-1]=i
}
const pagination = (pageNumbers) => {
this.setState({currentPage: pageNumbers})
}
const onNext = (currentPage) => {
this.setState({currentPage: this.state.currentPage+1})
}
const onPrevious = (currentPage) => {
this.setState({currentPage: this.state.currentPage-1})
};
return(
<ul className="pagination">
<li className={classnames('pagination-item', { disabled: this.state.currentPage* this.state.postsPerPage > this.state.vehicules.length })} >
{
(this.state.currentPage* this.state.postsPerPage > 10 )? <button className="page-link" onClick={()=> onPrevious(this.state.currentPage)} >السابق </button> :<button className="page-link" >السابق </button>
}
</li>
{pageNumbers.map(number => (
<li key={number} className={this.state.currentPage === number ? 'page-item active' : 'page-item' }>
<button onClick={()=> pagination(number)} className="page-link"> {number} </button>
</li>
))}
<li className={classnames('pagination-item', { disabled: this.state.currentPage* this.state.postsPerPage > this.state.vehicules.length })} >
{
(this.state.currentPage* this.state.postsPerPage <= this.state.vehicules.length )? <button className="page-link" onClick={()=> onNext(this.state.currentPage)} >التالي </button> :<button className="page-link" >التالي </button>
}
</li>
</ul>
)
}`
I'm trying to add a DOTS to my pagination table, so I started with some totus to get my data from an asp api as a JSON file then I displayed it on a table but my data was too big, which obligated me to use the pagination
in my pagination I was confronted with the same problem which is the number of pages, I had a lot of pages (2000 pages)
this is my function who displays the pages
`showPagination = () => {
const { pageNumbers,postsPerPage, vehicules } = this.state;