react full pagination without plugin

WinMaw answered on March 27, 2024 Popularity 1/10 Helpfulness 1/10

answer react full pagination without plugin

react full pagination without plugin

Comment

// Example SecondPagination component with limited visible page numbers and ellipsis

import React from 'react';

const Pagination = ({ currentPage, totalPages, onPageChange }) => {
  const maxVisiblePages = 5; // Maximum number of visible page buttons

  const generatePageNumbers = () => {
    let pageNumbers = [];

    // Determine the range of visible pages
    let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
    let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);

    // Adjust startPage and endPage if necessary
    if (endPage - startPage + 1 < maxVisiblePages) {
      startPage = Math.max(1, endPage - maxVisiblePages + 1);
    }

    // Add visible page numbers
    for (let i = startPage; i <= endPage; i++) {
      pageNumbers.push(i);
    }

    // Add ellipsis if necessary
    if (startPage > 1) {
      pageNumbers = [1, '...', ...pageNumbers];
    }
    if (endPage < totalPages) {
      pageNumbers = [...pageNumbers, '...', totalPages];
    }

    return pageNumbers;
  };

  return (
    <nav className='flex items-center justify-center mt-4'>
      <ul className="pagination flex space-x-2">
        <li>
          <button onClick={() => onPageChange(1)} disabled={currentPage === 1} className="border hover:bg-primary/50 text-white font-bold py-1 px-2 rounded focus:outline-none disabled:opacity-50"> 
            First
          </button>
        </li>
        <li>
          <button onClick={() => onPageChange(currentPage - 1)} disabled={currentPage === 1}         className="border hover:bg-primary/50 text-white font-bold py-1 px-2 rounded focus:outline-none disabled:opacity-50"
>
            Previous
          </button>
        </li>
        {generatePageNumbers().map((pageNumber, index) => (
          <li key={index}>
            {
                pageNumber != "..." ? (
                    <button
                    onClick={() => {onPageChange(pageNumber)}}
                    className={`${currentPage === pageNumber ? 'active border border-primary text-primary' : ''}  p-1 px-2 border`}
                  >
                    {pageNumber}
                  </button>
                ) : (
                    <button
                    // onClick={() => {onPageChange(pageNumber)}}
                    className={`${currentPage === pageNumber ? 'active border border-primary text-primary' : ''}  p-1 px-2`}
                  >
                    {pageNumber}
                  </button>
                )
            }
           
          </li>
        ))}
        <li>
          <button onClick={() => onPageChange(currentPage + 1)} disabled={currentPage === totalPages} className="border hover:bg-primary/50 text-white font-bold py-1 px-2 rounded focus:outline-none disabled:opacity-50">
            Next
          </button>
        </li>
        <li>
          <button onClick={() => onPageChange(totalPages)} disabled={currentPage === totalPages} className="border hover:bg-primary/50 text-white font-bold py-1 px-2 rounded focus:outline-none disabled:opacity-50">
            Last
          </button>
        </li>
      </ul>
    </nav>
  );
};

export default Pagination;


//Home.jsx
import React, { useState, useEffect } from 'react';
import Pagination from './Pagination';

const Home = () => {
  const [games, setGames] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [gamesPerPage] = useState(3);

  useEffect(() => {
    const fetchGames = async () => {
      try {
        const response = await axios.get('http://localhost:3000/games');
        setGames(response.data);
      } catch (error) {
        console.error('Error fetching games:', error);
      }
    };

    fetchGames();
  }, []);
  
  
  const indexOfLastGame = currentPage * gamesPerPage;
  const indexOfFirstGame = indexOfLastGame - gamesPerPage;
  const currentGames = games.slice(indexOfFirstGame, indexOfLastGame);

  const paginate = (pageNumber) => setCurrentPage(pageNumber);

  return (
    <div>
      <h1>Games</h1>
      <ul>
        {currentGames.map((game) => (
          <li key={game.id}>{game.name}</li>
        ))}
      </ul>
      <Pagination
        currentPage={currentPage}
        totalPages={Math.ceil(games.length / gamesPerPage)}
        onPageChange={paginate}
      />
    </div>
  );
};

export default Home;

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript pagination

Link to this answer
Share Copy Link

Contributed on Mar 27 2024

WinMaw

0 Answers Avg Quality 2/10

react full pagination without plugin

Contents

More Related Answers

react full pagination without plugin

Grepper

Documentation

Social

Legal

Contact

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