Добавление трех пунктов "..." влево и вправо в нумерации страниц - PullRequest
Новая
       9

Добавление трех пунктов "..." влево и вправо в нумерации страниц

0 голосов
/ 21 октября 2019

Я пытаюсь добавить три точки, подобные этой "...", между моими кнопками нумерации страниц, если они более пяти кнопок, может ли кто-нибудь помочь мне с этим. это код моей нумерации страниц: 

import React, { useState } from 'react'

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

const int = Math.ceil(totalPosts / productsPerPage)
    if (int === 1 ) return null 
    for (let i = 1; i<= int; i++) {
        PageNumbers.push(i) 
    }


    return (
        <nav className="">
            <ul className="pagination">
                 {PageNumbers.includes(currentPage - 1) && 
                <a className="page-link" href="!#" onClick={() => 
                    { setCurrentPage(currentPage - 1);  
                    paginate(currentPage - 1); }}> Föregående
                 </a>}

                    {PageNumbers.map(number=> (
                        <li key={number} className={number === currentPage ? 'page-item' : 'page-item '}>
                            <a onClick={ ()=> paginate(number)} href="!#" className="page-link active">
                                {number} 
                            </a>
                        </li>
                    ))}

                 {PageNumbers.includes(currentPage + 1) && 
                <a className="page-link" href="!#" onClick={() => 
                    {setCurrentPage(currentPage + 1); 
                    paginate(currentPage + 1); }}> Nästa 
                </a>}
            </ul>
        </nav>
    )
}

export default Pagination
...