تدير تطبيقات الويب كميات كبيرة من البيانات. على سبيل المثال ، تعرض تطبيقات التجارة الإلكترونية مليارات البيانات بطريقة منظمة وجذابة بصريًا. بشكل أساسي ، يجب تقديم البيانات بطريقة يسهل على المستخدمين فهمها والتنقل فيها.

ومع ذلك ، يمكن أن يؤدي عرض جميع البيانات على صفحة واحدة إلى مشاكل في الأداء ، وأوقات تحميل أبطأ ، وتجارب مستخدم سيئة. لهذا السبب ، يمكن أن يؤدي تطبيق منطق ترقيم الصفحات إلى التخفيف بشكل كبير من هذه المشاكل.

في React ، يمكنك اختيار استخدام المكونات المبنية مسبقًا التي توفرها مكتبات ترقيم الصفحات ، وبدلاً من ذلك ، يمكنك إنشاء نظام ترقيم صفحات مخصص باستخدام خطافات React.

تنفيذ ترقيم الصفحات من جانب العميل

هناك طريقتان لتنفيذ ترقيم الصفحات في التطبيقات: ترقيم الصفحات من جانب العميل والخادم. ومع ذلك ، بغض النظر عن التنسيق الذي تختاره ، يظل المفهوم الأساسي كما هو. يتضمن ترقيم الصفحات من جانب العميل التعامل مع منطق ترقيم الصفحات من جانب العميل ، داخل متصفح المستخدم.

يمكنك تنفيذ ترقيم الصفحات من جانب العميل باستخدام تقنيات مختلفة. تشمل هذه التقنيات:

1. ترقيم الصفحات على أساس الصفحة: تتضمن هذه الطريقة تقسيم البيانات إلى أجزاء أو صفحات ذات حجم ثابت ، وعادةً ما تعرض عددًا معينًا من العناصر في كل صفحة. يمكن للمستخدمين التنقل عبر الصفحات باستخدام روابط أو أزرار التنقل ، المسمى بأرقام الصفحات أو الأزرار السابقة والتالية. هذا تطبيق شائع مع محركات البحث وتطبيقات التجارة الإلكترونية.
2. التمرير اللانهائي: تتضمن هذه الطريقة تحميل البيانات الجديدة وعرضها ديناميكيًا أثناء قيام المستخدم بالتمرير لأسفل الصفحة ، مما يخلق تجربة تصفح سلسة ومستمرة. هذه التقنية مفيدة بشكل خاص عند التعامل مع مجموعات البيانات الكبيرة التي تتوسع باستمرار ، مثل خلاصات الوسائط الاجتماعية.

تنفيذ ترقيم الصفحات المستند إلى الصفحة باستخدام خطافات React

للبدء ، أنشئ مشروع React. يمكنك إما استخدام ملف أمر إنشاء-تفاعل-تطبيق جافا سكريبت لإعداد تطبيق React أساسيمحليا أو الاستفادة من Vite لدعم مشروع React على جهازك.

استخدم هذا البرنامج التعليمي Vite ، يمكنك العثور على رمز هذا المشروع في هذا مستودع جيثب.

بعد إعداد مشروع React الخاص بك ، دعنا نبدأ في تنفيذ ترقيم الصفحات على أساس الصفحة باستخدام خطافات React.

تكوين مجموعة البيانات

من الناحية المثالية ، يمكنك عادةً جلب البيانات وعرضها من قاعدة البيانات. ومع ذلك ، في هذا البرنامج التعليمي ، سوف تجلب البيانات من دمية JSONPlaceholder API بدلاً من.

في ال src الدليل ، قم بإنشاء ملف المكونات / ترقيم الصفحات ملف ، وأضف الكود التالي.

1. أنشئ مكونًا وظيفيًا لـ React وحدد الحالات التالية.

   يستورد React، {useEffect، useState} من"تتفاعل";
   يستورد"./style.component.css";
   وظيفةترقيم الصفحات() {
   مقدار ثابت [data، setData] = useState ([]) ؛
   مقدار ثابت [currentPage، setcurrentPage] = useState (1);
   مقدار ثابت [itemsPerPage، setitemsPerPage] = useState (5);
   مقدار ثابت [pageNumberLimit، setpageNumberLimit] = useState (5);
   مقدار ثابت [maxPageNumberLimit، setmaxPageNumberLimit] = useState (5);
   مقدار ثابت [minPageNumberLimit، setminPageNumberLimit] = useState (0);
   يعود (
    <>
   
    مكون ترقيم الصفحات </h1> 
   >
   
    </>
    );
   }
   يصدّرتقصير ترقيم الصفحات

2. تنفيذ المنطق لجلب البيانات من الدمية API. داخل ترقيم الصفحات المكون ، أضف أدناه.

    useEffect (() => {
    أحضر(" https://jsonplaceholder.typicode.com/todos")
    .ثم((إجابة) => response.json ())
    .ثم((json) => setData (json)) ؛
    }, []);
   مقدار ثابت displayData = (بيانات) => {
   يعود (
   
   
    {data.length> 0 &&
    خريطة البيانات ((todo ، index) => {
   يعود<ليمفتاح={فِهرِس}>{todo.title}لي>;
    })}
    </ul>
    );
    };
   

   يخدم الكود أعلاه غرضين رئيسيين. أولاً ، بمجرد تركيب المكون ، فإن ملف useEffect مشغلات ربط لجلب البيانات من نقطة نهاية API الخارجية والتي يتم تحويلها بعد ذلك إلى تنسيق JSON. يتم بعد ذلك استخدام بيانات JSON الناتجة لتحديث ملف بيانات متغير الحالة مع بيانات المهام التي تم جلبها. ثانياً ، عرض البيانات ستأخذ الوظيفة البيانات التي تم جلبها كوسيطة وتعرض البيانات كقائمة غير مرتبة من المهام.
3. في مقطع العودة من ترقيم الصفحات المكون ، بما في ذلك عرض البيانات وظيفة لعرض البيانات التي تم جلبها في المتصفح. إليك نسخة محدثة من الكود:

   يعود (
    <>
    مكون ترقيم الصفحات </h1> 
   >
    {displayData (data)}
    </>
   );
   

   بالاتصال عرض البيانات (البيانات) داخل عنصر JSX وتمرير بيانات متغير الحالة كمعامل ، ستعرض الوظيفة البيانات التي تم جلبها كقائمة غير مرتبة في المتصفح.

في هذه الحالة بالذات ، تتكون القائمة المقدمة من مائتي مهمة. ومع ذلك ، في سيناريوهات العالم الحقيقي ، ستدير التطبيقات كميات كبيرة من البيانات. يمكن أن يؤدي عرض كل هذه البيانات على صفحة ويب واحدة إلى حدوث مشكلات في الأداء ، مثل بطء التحميل وسوء أداء التطبيق بشكل عام.

لمعالجة هذا الأمر ، سيكون من المناسب دمج وظيفة ترقيم الصفحات لضمان احتواء كل صفحة على عدد محدود من العناصر التي يمكن للمستخدمين الوصول إليها بشكل منفصل باستخدام أزرار التنقل.

يسمح هذا الأسلوب للمستخدمين بالتنقل عبر البيانات بطريقة أكثر تنظيمًا وإمكانية للإدارة ، مما يؤدي إلى تحسين الأداء العام وتجربة المستخدم للتطبيق.

تطبيق منطق ترقيم الصفحات لعرض عدد محدود من العناصر في كل صفحة

لتحديد عناصر المهام التي سيتم عرضها في كل صفحة ، نحتاج إلى تنفيذ المنطق الضروري. ومع ذلك ، قبل المتابعة ، من الضروري تحديد العدد الإجمالي للصفحات المطلوبة بناءً على عناصر المهام المتاحة.

لتحقيق ذلك ، يمكنك إضافة الكود التالي إلى ملف ترقيم الصفحات عنصر:

مقدار ثابت الصفحات = [] ؛
ل (يترك أنا = 1; أنا <= رياضيات.ceil (data.length / itemsPerPage) ؛ أنا ++) {
 pages.push (i) ؛
 }

مقتطف الشفرة أعلاه ، يتكرر من خلال ملف بيانات صفيف ، حساب العدد الإجمالي للصفحات المطلوبة بقسمة طول ملف بيانات مصفوفة حسب عدد العناصر المطلوب في كل صفحة — يتم تعيين العدد الأولي للعناصر في كل صفحة على خمسة في مواد لكل صفحة ولاية.

ومع ذلك ، يمكنك تحديث هذا الرقم كما هو مطلوب لاختبار المنطق. وأخيرًا ، تتم إضافة كل رقم صفحة إلى ملف الصفحات مجموعة مصفوفة. الآن ، دعنا ننفذ منطق عرض عدد من العناصر في كل صفحة.

مقدار ثابت indexOfLastItem = currentPage * itemsPerPage ؛
مقدار ثابت indexOfFirstItem = indexOfLastItem - itemsPerPage ؛
مقدار ثابت pageItems = data.slice (indexOfFirstItem ، indexOfLastItem) ؛

تحدد هذه الشفرة المهام المطلوب عرضها على صفحة المتصفح بناءً على الصفحه الحاليه و مواد لكل صفحة المتغيرات - تستخرج الفهارس المقابلة لمجموعة المهام من مصفوفة البيانات باستخدام طريقة الشرائح. تُستخدم الفهارس بعد ذلك لاسترداد المهام المحددة التي تنتمي إلى الصفحة المطلوبة.

الآن ، لعرض المهام ، قم بتحديث ملف عرض البيانات تعمل عن طريق تمرير pageItems كمعامل. إليك نسخة محدثة من الكود:

يعود (
 <>
 مكون ترقيم الصفحات </h1> 
>
 {displayData (pageItems)}
 </>
);

من خلال إجراء هذا التحديث ، فإن ملف عرض البيانات ستعرض الوظيفة عددًا محدودًا من عناصر المهام بشكل مناسب ، مما يعكس الصفحة الحالية.

تبسيط الوصول إلى الصفحة والتنقل باستخدام أزرار التنقل

لضمان سهولة تنقل المستخدمين والوصول إلى المحتوى على صفحات مختلفة ، تحتاج إلى إضافة الأزرار السابقة والتالية ، بالإضافة إلى الأزرار التي تحدد أرقام الصفحات المحددة.

أولاً ، دعنا نطبق المنطق لأزرار أرقام الصفحات. في ال ترقيم الصفحات المكون ، أضف الكود أدناه.

مقدار ثابت handleClick = (حدث) => {
 setcurrentPage (رقم(event.target.id)) ؛
 };
مقدار ثابت renderPageNumbers = pages.map ((رقم) => {
لو (رقم 1 && number> minPageNumberLimit) {
يعود (
 مفتاح = {رقم}
 المعرف = {number}
 onClick = {handleClick}
 className = {currentPage == number؟ "نشيط": باطل}
 >
 {رقم}
 </li>
 );
 } آخر {
يعودباطل;
 }
 });

ال مقبض يتم تشغيل الوظيفة عندما ينقر المستخدم على زر رقم الصفحة. يقوم هذا الإجراء بعد ذلك بتحديث ملف الصفحه الحاليه متغير الحالة مع رقم الصفحة المحدد.

ال عرض الصفحة متغير يستخدم خريطة طريقة للتكرار على مدى الصفحات صفيف ويقوم ديناميكيًا بإنشاء عناصر قائمة تمثل كل رقم صفحة. يطبق المنطق الشرطي لتحديد أرقام الصفحات التي سيتم عرضها بناءً على الحد الأقصى والحد الأدنى المحدد لأرقام الصفحات.

أخيرًا ، أضف الرمز للأزرار التالية والسابقة.

مقدار ثابت handleNextbtn = () => {
 setcurrentPage (currentPage + 1);
لو (الصفحة الحالية + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit) ،
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit) ،
 }
 };
مقدار ثابت مقبضPrevbtn = () => {
 setcurrentPage (CurrentPage - 1);
لو ((الصفحه الحاليه - 1)٪ pageNumberLimit == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit) ؛
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit) ؛
 }
 };

لعرض أزرار التنقل ، قم بتحديث عناصر JSX على النحو التالي:

يعود (
 <>
 مكون ترقيم الصفحات </h1> 
>
 {displayData (pageItems)}
"أرقام الصفحات">




 onClick = {handlePrevbtn}
 معطل = {currentPage == صفحات [0]? حقيقي: خطأ شنيع}
 > السابق
 </button>
 </li>

 {renderPageNumbers}


 onClick = {handleNextbtn}
 معطل = {currentPage == صفحات [pages.length - 1]? حقيقي: خطأ شنيع}
 > التالي
 </button>
 </li>
 </ul>
 </>
 );

بمجرد عرض المكون ، سيعرض أرقام الصفحات والأزرار السابقة والتالية وعناصر البيانات المقابلة للصفحة الحالية.

الاختيار بين مكتبات ترقيم الصفحات وأنظمة ترقيم الصفحات المخصصة

عندما يتعلق الأمر بالاختيار بين استخدام مكتبات ترقيم الصفحات أو بناء نظام ترقيم صفحات مخصص ، يعتمد الاختيار على عوامل مختلفة. توفر مكتبات ترقيم الصفحات ، مثل ترقيم الصفحات التفاعلية ، مكونات ووظائف مسبقة الصنع ، مما يسمح بتنفيذ سريع ومباشر.

من ناحية أخرى ، يوفر بناء نظام ترقيم الصفحات المخصص باستخدام خطافات React مزيدًا من المرونة والتحكم في منطق ترقيم الصفحات وواجهة المستخدم. سيعتمد القرار في النهاية على احتياجاتك وتفضيلاتك المحددة.