Как динамически добавлять точки, как это "...", чтобы указать, что есть больше кнопок нумерации страниц - PullRequest
Новая
       11

Как динамически добавлять точки, как это "...", чтобы указать, что есть больше кнопок нумерации страниц

0 голосов
/ 22 октября 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); }}> Previous
                 </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); }}> Next 
                </a>}
            </ul>
        </nav>
    )
}

export default Pagination

1 Ответ

2 голосов
/ 22 октября 2019

Замените свою функцию возврата следующим кодом: 

return (
     <nav className="">
       <ul className="pagination">      
        {PageNumbers.map(number => (          
            (number < 3 || (number > currentPage-2 && number < currentPage+2) || 
               number > PageNumbers.length - 2 )  ?
           <li
              key={number}
              className={number === currentPage ? "page-item" : "page-item "}
           >
             <a
               onClick={() => paginate(number)}
               href="!#"
               className={"page-link " + number ===currentPage ?'active':''}
             >
                {number}
             </a>
          </li>
          :
          PageNumbers.length>5 && number < 4 ? '...'
          : 
          number < PageNumbers.length && number == currentPage+2 ? '...'
          :null

      ))}
    </ul>
   </nav>
);

Выше кода показывает номер первых двух страниц, номер двух последних страниц и номер текущей страницы с номером предыдущей и следующей страниц, номера остальных страниц будутточка точка.

...