To make dynamic pagination in the frontend, you can implement logic that adjusts based on:

• The total number of items,
• The current page,
• The items per page, and
• A sliding window of visible page numbers (for better UX).

✅ Step-by-step: Dynamic Pagination in Frontend (React + Tailwind Example)

🔹 1. Define States

const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 10;
const totalItems = 100; // Example
const totalPages = Math.ceil(totalItems / itemsPerPage);

🔹 2. Create a function for dynamic page numbers

function getPageNumbers() {
  const maxVisiblePages = 5;
  let start = Math.max(currentPage - Math.floor(maxVisiblePages / 2), 1);
  let end = start + maxVisiblePages - 1;
 
  if (end > totalPages) {
    end = totalPages;
    start = Math.max(end - maxVisiblePages + 1, 1);
  }
 
  const pages = [];
  for (let i = start; i <= end; i++) {
    pages.push(i);
  }
  return pages;
}

🔹 3. Render Buttons Dynamically

<div className="flex gap-2 items-center justify-center mt-4">
  <button
    disabled={currentPage === 1}
    onClick={() => setCurrentPage(currentPage - 1)}
    className="px-3 py-1 bg-gray-200 rounded disabled:opacity-50"
  >
    Prev
  </button>
 
  {getPageNumbers().map((page) => (
    <button
      key={page}
      onClick={() => setCurrentPage(page)}
      className={`px-3 py-1 rounded ${
        page === currentPage ? "bg-blue-500 text-white" : "bg-gray-200"
      }`}
    >
      {page}
    </button>
  ))}
 
  <button
    disabled={currentPage === totalPages}
    onClick={() => setCurrentPage(currentPage + 1)}
    className="px-3 py-1 bg-gray-200 rounded disabled:opacity-50"
  >
    Next
  </button>
</div>

🔹 4. Use Sliced Data to Show Items

const dataToShow = allItems.slice(
  (currentPage - 1) * itemsPerPage,
  currentPage * itemsPerPage
);

✅ Output Behavior

• Only 5 pages show at a time.
• When you click "Next", it shifts forward.
• Smooth page change with real data slice.
• You can fetch from backend too (pass currentPage in the request).

⚡ Want Server-side Pagination?

Use useEffect to fetch data:

useEffect(() => {
  fetch(`/api/data?page=${currentPage}&limit=${itemsPerPage}`)
    .then((res) => res.json())
    .then((data) => setItems(data));
}, [currentPage]);

If you'd like, I can give you a full working React + Tailwind demo with animation too. Let me know!

চলো ভাই, তোমার getPageNumbers ফাংশনটা একদম লাইন বাই লাইন বাংলা ভাষায়, সহজভাবে ব্যাখ্যা করি— যেন তুমি একদম ফাটিয়ে ফেলো!

🔍 ফাংশনটির উদ্দেশ্য কী?

👉 এই ফাংশনটি হচ্ছে pagination এর page number গুলো নির্ধারণ করার জন্য। যেমন: ধরো মোট ২০টা পেজ আছে, কিন্তু তুমি একসাথে ২০টা পেজ দেখাতে চাও না। তুমি চাও যেন একসাথে শুধু ৫টা পেজ দেখায়, এবং সেটা স্লাইড করে move করে, যেমন:

[1] [2] [3] [4] [5] → current page 3 হলে
[4] [5] [6] [7] [8] → current page 6 হলে

✅ লাইন বাই লাইন ব্যাখ্যা:

function getPageNumbers() {

👉 এটা ফাংশনের শুরু। ফাংশনের নাম getPageNumbers, অর্থাৎ এটা পেজ নাম্বার বের করবে।

const maxVisiblePages = 5;

👉 একসাথে কতগুলো পেজ নাম্বার দেখাবে? এখানে ৫টা ঠিক করা আছে।

let start = Math.max(currentPage - Math.floor(maxVisiblePages / 2), 1);

👉 এখন ধরো currentPage = 6 হলে:

• Math.floor(5 / 2) = 2
• currentPage - 2 = 6 - 2 = 4
• কিন্তু যদি currentPage 1 হয়, তাহলে 1 - 2 = -1, যেটা ঠিক না।
• তাই Math.max(..., 1) দিয়ে বলা হয়েছে — কমপক্ষে ১ থেকেই শুরু হবে।

✅ অর্থ: start হচ্ছে pagination এর শুরুর page number।

let end = start + maxVisiblePages - 1;

👉 start থেকে শুরু করে কতদূর পর্যন্ত যাবে? ৫টা পর্যন্ত।

• start + 5 - 1 = start + 4
• উদাহরণ: start = 4 হলে → end = 8

✅ অর্থ: এটা হচ্ছে pagination এর শেষ page number।

if (end > totalPages) {
  end = totalPages;
  start = Math.max(end - maxVisiblePages + 1, 1);
}

👉 যদি end পেজ সংখ্যা (totalPages) এর চেয়ে বেশি হয়ে যায় (যেমন 100 এর মধ্যে 98, 99, 100, 101, 102 হয়), তাহলে:

• end = totalPages → শেষ সীমা ঠিক করা হলো
• start = end - 4 → কারণ ৫টা পেজ দেখাতে হবে

✅ উদ্দেশ্য: শেষের দিকে গিয়ে যেন ভুল পেজ নাম্বার না দেখায়।

const pages = [];

👉 একটা খালি array বানানো হলো, যাতে পেজ নাম্বার গুলো ভরে রাখা যায়।

for (let i = start; i <= end; i++) {
  pages.push(i);
}

👉 start থেকে end পর্যন্ত loop চালিয়ে সব page number pages array-তে ঢোকানো হচ্ছে।

  return pages;
}

👉 সবশেষে, এই পেজ নাম্বারগুলা return করে দেয়া হচ্ছে। যেগুলা UI-তে দেখানো হবে।

🔁 ধরো উদাহরণ:

• totalPages = 10
• currentPage = 6

start = Math.max(6 - 2, 1) = 4
end = 4 + 5 - 1 = 8
 
=> pages = [4, 5, 6, 7, 8]

🧠 এখন তোমার জন্য প্রশ্ন:

👉 ধরো, totalPages = 7 এবং currentPage = 7 হলে, এই getPageNumbers() ফাংশন কী start এবং end মান নির্ধারণ করবে? pages array-টা কী হবে?

উত্তর দিয়ে দেখাও তুমি আটকে পড়ো না 😎

চলো ভাই 💻 এই কোডটাকে একদম ধাপে ধাপে ভেঙে বুঝে ফেলি — যেন তুমি pagination নিয়ে আর কখনো আটক না যাও!

✅ কোড:

const dataToShow = allItems.slice(
  (currentPage - 1) * itemsPerPage,
  currentPage * itemsPerPage
);

📦 এই কোডটা কী করে?

👉 এটি মূলত allItems নামক বড় একটি অ্যারের ভিতর থেকে সঠিক পেজ অনুযায়ী data কেটে নিচ্ছে — মানে শুধু সেই পেজের data গুলো দেখানোর জন্য।

🔎 ধাপে ধাপে ব্যাখ্যা:

🔢 ধরো:

• allItems.length = 20
• itemsPerPage = 5
• currentPage = 2

📌 Step 1:

(currentPage - 1) * itemsPerPage;

= (2 - 1) * 5 = 1 * 5 = 5

👉 মানে শুরু index হবে ৫, যেটা হচ্ছে ৬তম item (index 5 দিয়ে শুরু হয়)

📌 Step 2:

currentPage * itemsPerPage;

= 2 * 5 = 10

👉 মানে শেষ index হবে 10, কিন্তু slice() ফাংশনে এই index পর্যন্ত নেয় না, বরং আগ পর্যন্ত নেয়। মানে নেয় 5 থেকে 9 পর্যন্ত index এর আইটেমগুলো।

📌 এখন পুরা slice() অংশ:

allItems.slice(5, 10);

👉 মানে: ৬ নম্বর থেকে ১০ নম্বর পর্যন্ত আইটেম গুলো নেয়া হবে।

✅ Final result:

dataToShow অ্যারেতে এখন থাকবে ৫টা আইটেম — যেগুলো হচ্ছে current page (2) এর জন্য।

🧠 সংক্ষেপে মনে রাখো:

slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);

🔹 startIndex = (page - 1) * perPage 🔹 endIndex = page * perPage

🎯 এখন তোমার জন্য চ্যালেঞ্জ:

ধরো:

• itemsPerPage = 4
• currentPage = 3
• allItems.length = 12

👉 তাহলে start, end, এবং slice() কী হবে? আর dataToShow তে কোন কোন index এর data থাকবে?

উত্তর দাও — দেখি কে কাকে আটকে দেয় 😎