Breaking News: Grepper is joining You.com. Read the official announcement!

react/next JS pagination tailwind

Readul Ahmed answered on February 22, 2024 Popularity 4/10 Helpfulness 1/10

answer react/next JS pagination tailwind

react/next JS pagination tailwind

Comment

import React from 'react'

const Pagination = ({currentPage, setCurrentPage, totalPages}) => {

    
    const pagesToShow = 10;
    const halfPagesToShow = Math.floor(pagesToShow / 2);

    const renderPageNumbers = () => {
        const pageNumbers = [];
        if (totalPages <= pagesToShow) {
          for (let i = 1; i <= totalPages; i++) {
            pageNumbers.push(
              <li key={i} onClick={() => setCurrentPage(i)} className={currentPage === i ? 'p-2 bg-gray-300 border' : 'border p-2 cursor-pointer'}>
                {i}
              </li>
            );
          }
        } else {
          let startPage = Math.max(1, currentPage - halfPagesToShow);
          let endPage = Math.min(totalPages, startPage + pagesToShow - 1);
    
          if (currentPage <= halfPagesToShow) {
            endPage = pagesToShow;
          } else if (currentPage >= totalPages - halfPagesToShow) {
            startPage = totalPages - pagesToShow + 1;
          }
    
          for (let i = startPage; i <= endPage; i++) {
            pageNumbers.push(
              <li key={i} onClick={() => setCurrentPage(i)} className={currentPage === i ? 'p-2 bg-gray-300 border' : 'border p-2 cursor-pointer'}>
                {i}
              </li>
            );
          }
    
          if (startPage > 1) {
            pageNumbers.unshift(
              <li key="prev-dots" className="p-2 flex itmes-center">
                <span>...</span>
              </li>
            );
          }
  
          if (endPage < totalPages) {
            pageNumbers.push(
              <li key="next-dots" className="p-2 flex itmes-center">
                <span>...</span>
              </li>
            );
          }
        }
        return pageNumbers;
      };

  return (
        <div className="pagination flex items-center gap-3 w-full justify-center my-4">
            <button onClick={() => setCurrentPage(currentPage - 1)} disabled={currentPage === 1} className={`${currentPage == 1 ? 'hidden' : ''}`}>
              Prev
            </button>
            <ul className="flex">{renderPageNumbers()}</ul>
            <button onClick={() => setCurrentPage(currentPage + 1)} disabled={currentPage === totalPages} className={`${currentPage == totalPages ? 'hidden' : ''}`}>
              Next
            </button>
        </div>
  )
}

export default Pagination

Popularity 4/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript pagination

Link to this answer
Share Copy Link

Contributed on Feb 22 2024

Readul Ahmed

0 Answers Avg Quality 2/10

react/next JS pagination tailwind

Contents

More Related Answers

react/next JS pagination tailwind

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.