Как сделать так, чтобы нумерация страниц снова возвращалась на первую страницу? - PullRequest
Новая
       29

Как сделать так, чтобы нумерация страниц снова возвращалась на первую страницу?

0 голосов
/ 02 ноября 2019

Я использую фильтры и нумерацию страниц. Когда я делаю пагинацию и останавливаюсь на любой странице, кроме первой, и после этого выбираю другой фильтр, он дает мне пустую страницу, пока я не нажму этот номер страницы. Я хочу, чтобы нумерация страниц возвращалась на первую страницу автоматически (по умолчанию) при выборе другого фильтра.

Это мой код нумерации страниц: 

import React, { useState } from 'react'

const Pagination = ({productsPerPage, totalPosts, paginate}) => {
const [currentPage, setCurrentPage] = useState(1)

const PageNumbers =[]
const int = Math.ceil(totalPosts / productsPerPage)

    for (let i = 1; i<= int; i++) {
        PageNumbers.push(i) 
    }
    return (
        <nav className="">
            <ul className="pagination">   
            <button
                    className={`${currentPage === 1 ? 'previous-disabled' : ''} prev page-link`}
                    disabled={currentPage === 1}
                    href="!#"
                    onClick={() => { 
                        setCurrentPage(currentPage - 1);
                        paginate(currentPage - 1); 
                    }}
                    > 
                    Previous
          </button>
                        {PageNumbers.map(number => (          
                    (number < 3 || (number > currentPage-2 && number < currentPage+2) || 
                    number > PageNumbers.length - 2 )  ?
                        <li
                            key={number}
                            className={number === currentPage ? "page-item active" : "page-item "}
                        >
                            <a
                                onClick={() => paginate(number)}
                                href="!#"
                                className="page-link"
                                >
                                {number}   
                            </a>
                        </li>
                        :
                        PageNumbers.length>5 && number < 4 ? <a className="page-link">...</a>
                        : 
                        number < PageNumbers.length && number == currentPage+2 ? <a className="page-link">...</a>
                        :null
                    ))}
                <a 
                className={`${currentPage === PageNumbers.length - 1 ? 'paginate-disabled' : ''} next page-link`}
                disabled={currentPage === PageNumbers.length - 1}
                href="!#"
                onClick={() => { 
                    setCurrentPage(currentPage + 1);
                    paginate(currentPage + 1); 
                }}
                > 
                Next
                </a>
            </ul>
        </nav>
    )
}

export default Pagination
...