pagination

import React from "react";

function Pagination({ currentPage, totalPages, onPageChange }) {
  const getPageNumbers = () => {
    const pageNumbers = [];
    const visiblePages = 5; // Number of visible page links

    if (totalPages <= visiblePages) {
      // If the total number of pages is less than or equal to the visible pages,
      // show all page links
      for (let i = 1; i <= totalPages; i++) {
        pageNumbers.push(i);
      }
    } else {
      // If the total number of pages is greater than the visible pages,
      // calculate the range of page links to display based on the current page

      let startPage = currentPage - Math.floor(visiblePages / 2);
      let endPage = currentPage + Math.floor(visiblePages / 2);

      if (startPage < 1) {
        // Adjust the start and end page numbers if they go below 1 or above the total pages
        endPage += Math.abs(startPage) + 1;
        startPage = 1;
      }

      if (endPage > totalPages) {
        // Adjust the start and end page numbers if they go above the total pages
        startPage -= endPage - totalPages;
        endPage = totalPages;
      }

      for (let i = startPage; i <= endPage; i++) {
        pageNumbers.push(i);
      }
    }

    return pageNumbers;
  };

  return (
    <nav>
      <ul className="pagination">
        <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
          <span className="page-link" onClick={() => onPageChange(currentPage - 1)}>
            Previous
          </span>
        </li>
        {getPageNumbers().map((pageNumber) => (
          <li
            key={pageNumber}
            className={`page-item ${pageNumber === currentPage ? "active" : ""}`}
          >
            <span className="page-link" onClick={() => onPageChange(pageNumber)}>
              {pageNumber}
            </span>
          </li>
        ))}
        <li className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}>
          <span className="page-link" onClick={() => onPageChange(currentPage + 1)}>
            Next
          </span>
        </li>
      </ul>
    </nav>
  );
}

export default Pagination;


import { useState, useEffect } from "react";
import axios from "axios";
import Headers from "./parcelView/Headers";
import Sidebar from "./parcelView/sidebar";
import { Helmet } from "react-helmet-async";
import "./parcelView/admin.css";
import { RiFileEditFill } from "react-icons/ri";
import { NavLink } from "react-router-dom";
import Pagination from "../component/Pagination";
import { API_URL } from "../API/config";

function Designation() {
  const [products, setProduct] = useState([0]);
  const [currentPage, setCurrentPage] = useState(1);
  const [perPage, setPerPage] = useState(10);

  const totalPages = Math.ceil(products.length / perPage);

  const startIndex = (currentPage - 1) * perPage;
  const endIndex = startIndex + perPage - 1;

  const handlePageChange = (pageNumber) => {
     if (pageNumber >= 1 && pageNumber <= totalPages) {
      setCurrentPage(pageNumber);
    }
  };

  const getProfile = async () => {
    await axios
      .get(`${API_URL.designation.get}`)
      .then(function (response) {
        // handle success
        console.log(response.data.data);
        setProduct(response.data.data);
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      });
  };

  useEffect(() => {
    getProfile();
  }, []);

  return (
    <>
      <Helmet>
        <title> Designation</title>
      </Helmet>
      <div className="wrapper ">
        <Headers />

        <Sidebar />
        <div className="content-wrapper" style={{ backgroundColor: "white" }}>
          <section className="content-header">
            <div className="container-fluid">
              <div className="row mb-2">
                <div className="col-sm-6">
                  <h1>Designation</h1>
                </div>
              </div>
            </div>
          </section>

          <section className="content">
            <div className="container-fluid">
              <div className="row">
                <div className="col-12">
                  <div className="card">
                    <div className="card-header">
                      <NavLink
                        to="/designation/add"
                        className="btn btn-primary"
                      >
                        Add Designation
                      </NavLink>
                    </div>
                    {/* /.card-header */}
                    <div className="card-body">
                      <table
                        id="example2"
                        className="table table-bordered table-hover"
                      >
                        <thead>
                          <tr>
                            <th></th>
                            <th>DesignationName</th>
                          </tr>
                        </thead>
                        <tbody>
                          {products
                            .slice(startIndex, endIndex + 1)
                            .map((item, index) => (
                              <tr key={index}>
                                <td className="">
                                  <NavLink to="/designation/update">
                                    <RiFileEditFill />
                                  </NavLink>
                                </td>
                                <td className="">{item.DesignationName}</td>
                              </tr>
                            ))}
                        </tbody>
                      </table>
                      <div className="entries-range d-flex justify-content-between mt-2">
                        <div>
                          Showing {startIndex + 1} to{" "}
                          {Math.min(endIndex + 1, products.length)} of{" "}
                          {products.length} entries
                        </div>
                        <div>
                          <Pagination
                            currentPage={currentPage}
                            totalPages={totalPages}
                            onPageChange={handlePageChange}
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </>
  );
}

export default Designation;