pagination with limit

2026-07-22 15:39:20 +03:30
parent 96d750fc88
commit 9aadb8e6ad
4 changed files with 237 additions and 217 deletions
@@ -1,64 +1,90 @@
 import React from "react";

 interface PaginationProps {
-    currentPage: number;
-    totalPages: number;
-    onPageChange: (page: number) => void;
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  limit?: number;
+  onLimitChange?: (limit: number) => void;
+  limitOptions?: number[];
 }

-const Pagination: React.FC<PaginationProps> = ({
-    currentPage,
-    totalPages,
-    onPageChange,
-}) => {
-    const getPageNumbers = () => {
-        const pageNumbers: (number | string)[] = [];
-        const maxVisiblePages = 5;
+const Pagination: React.FC<PaginationProps> = ({ currentPage, totalPages, onPageChange, limit = 10, onLimitChange, limitOptions = [10, 20, 50] }) => {
+  const handleLimitChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    onLimitChange?.(Number(event.target.value));
+    onPageChange(1);
+  };

-        if (totalPages <= maxVisiblePages) {
-            // اگر تعداد صفحات کم است، همه را نشان بده
-            for (let i = 1; i <= totalPages; i++) {
-                pageNumbers.push(i);
-            }
-        } else {
-            // همیشه صفحه اول را نشان بده
-            pageNumbers.push(1);
+  const getPageNumbers = () => {
+    const pageNumbers: (number | string)[] = [];
+    const maxVisiblePages = 5;

-            if (currentPage <= 3) {
-                // در صفحات اولیه (1, 2, 3)
-                for (let i = 2; i <= Math.min(4, totalPages - 1); i++) {
-                    pageNumbers.push(i);
-                }
-                if (totalPages > 5) {
-                    pageNumbers.push("...");
-                }
-                pageNumbers.push(totalPages);
-            } else if (currentPage >= totalPages - 2) {
-                // در صفحات آخر
-                pageNumbers.push("...");
-                for (let i = totalPages - 3; i <= totalPages; i++) {
-                    pageNumbers.push(i);
-                }
-            } else {
-                // در صفحات وسط
-                pageNumbers.push("...");
-                for (let i = currentPage - 1; i <= currentPage + 1; i++) {
-                    pageNumbers.push(i);
-                }
-                pageNumbers.push("...");
-                pageNumbers.push(totalPages);
-            }
+    if (totalPages <= maxVisiblePages) {
+      // اگر تعداد صفحات کم است، همه را نشان بده
+      for (let i = 1; i <= totalPages; i++) {
+        pageNumbers.push(i);
+      }
+    } else {
+      // همیشه صفحه اول را نشان بده
+      pageNumbers.push(1);
+
+      if (currentPage <= 3) {
+        // در صفحات اولیه (1, 2, 3)
+        for (let i = 2; i <= Math.min(4, totalPages - 1); i++) {
+          pageNumbers.push(i);
        }
+        if (totalPages > 5) {
+          pageNumbers.push("...");
+        }
+        pageNumbers.push(totalPages);
+      } else if (currentPage >= totalPages - 2) {
+        // در صفحات آخر
+        pageNumbers.push("...");
+        for (let i = totalPages - 3; i <= totalPages; i++) {
+          pageNumbers.push(i);
+        }
+      } else {
+        // در صفحات وسط
+        pageNumbers.push("...");
+        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+          pageNumbers.push(i);
+        }
+        pageNumbers.push("...");
+        pageNumbers.push(totalPages);
+      }
+    }

-        return pageNumbers;
-    };
+    return pageNumbers;
+  };

-    const pageNumbers = getPageNumbers();
+  const pageNumbers = getPageNumbers();

-    return (
-        <div className="flex gap-2 text-xs justify-center items-center mt-4">
-            {/* دکمه قبلی */}
-            {/* <button
+  return (
+    <div className="flex flex-wrap gap-4 text-xs justify-center items-center mt-4">
+      {onLimitChange && (
+        <label className="flex items-center gap-2 text-gray-600">
+          <span>تعداد در صفحه</span>
+          <select
+            aria-label="تعداد آیتم در صفحه"
+            className="h-8 rounded-md border border-[#EAECF5] bg-white px-2 outline-none focus:border-primary"
+            value={limit}
+            onChange={handleLimitChange}
+          >
+            {limitOptions.map((option) => (
+              <option
+                key={option}
+                value={option}
+              >
+                {option}
+              </option>
+            ))}
+          </select>
+        </label>
+      )}
+
+      <div className="flex gap-2 items-center">
+        {/* دکمه قبلی */}
+        {/* <button
                className={`px-3 py-1 rounded-md ${currentPage === 1
                        ? "text-gray-400 cursor-not-allowed"
                        : "text-blue-600 hover:bg-gray-100"
@@ -69,28 +95,28 @@ const Pagination: React.FC<PaginationProps> = ({
                قبلی
            </button> */}

-            {/* شماره صفحات */}
-            {pageNumbers.map((page, index) =>
-                typeof page === "number" ? (
-                    <button
-                        key={`page-${page}`}
-                        className={`size-8 rounded-md ${currentPage === page
-                            ? "bg-primary text-white"
-                            : "text-primary bg-[#EAECF5] hover:bg-gray-100"
-                            }`}
-                        onClick={() => onPageChange(page)}
-                    >
-                        {page}
-                    </button>
-                ) : (
-                    <span key={`ellipsis-${index}`} className="px-3 py-1 text-gray-500">
-                        {page}
-                    </span>
-                )
-            )}
+        {/* شماره صفحات */}
+        {pageNumbers.map((page, index) =>
+          typeof page === "number" ? (
+            <button
+              key={`page-${page}`}
+              className={`size-8 rounded-md ${currentPage === page ? "bg-primary text-white" : "text-primary bg-[#EAECF5] hover:bg-gray-100"}`}
+              onClick={() => onPageChange(page)}
+            >
+              {page}
+            </button>
+          ) : (
+            <span
+              key={`ellipsis-${index}`}
+              className="px-3 py-1 text-gray-500"
+            >
+              {page}
+            </span>
+          ),
+        )}

-            {/* دکمه بعدی */}
-            {/* <button
+        {/* دکمه بعدی */}
+        {/* <button
                className={`px-3 py-1 rounded-md ${currentPage === totalPages
                        ? "text-gray-400 cursor-not-allowed"
                        : "text-blue-600 hover:bg-gray-100"
@@ -100,8 +126,9 @@ const Pagination: React.FC<PaginationProps> = ({
            >
                بعدی
            </button> */}
-        </div>
-    );
+      </div>
+    </div>
+  );
 };

-export default Pagination;
+export default Pagination;