ترقيم الصفحات هو أسلوب مفيد يمكن أن تستفيد منه معظم التطبيقات كثيفة البيانات. تساعدك مكتبة ترقيم الصفحات التفاعلية على تبسيط هذه العملية.

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

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

مقدمة لمكتبة تفاعل الصفحات

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

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

إنشاء المشروع

للبدء ، أنشئ مشروع React باستخدام الأمر create-reaction-app أو Vite. يستخدم هذا البرنامج التعليمي Vite. يمكنك العثور على التعليمات في هذا المنشور حول كيفية إعداد مشاريع React باستخدام Vite.

بمجرد إنشاء المشروع ، احذف بعض المحتوى في App.jsx, بحيث يطابق هذا الرمز:

instagram viewer 
وظيفةبرنامج() {
يعود (
 </div>
 );
}
يصدّرتقصير برنامج؛

يمنحك هذا ملفًا نظيفًا لبدء العمل مع ترقيم الصفحات.

إعداد البيانات

ستجلب البيانات من JSON placeholder API. توفر واجهة برمجة التطبيقات هذه نقاط نهاية للمشاركات والتعليقات والألبومات والصور والمهام والمستخدمين. عبر نقطة نهاية المشاركات ، سوف تفعل جلب البيانات من API باستخدام Axios، مكتبة عميل HTTP.

للبدء ، قم بتثبيت Axios باستخدام هذا الأمر الطرفي:

npm تثبيت أكسيوس

بعد ذلك ، قم باستيراد مكتبة الخطاف useEffect و axios في الجزء العلوي من App.jsx، ثم قم بإحضار المشاركات من واجهة برمجة التطبيقات كما هو موضح أدناه.

يستورد أكسيوس من"أكسيوس";
يستورد {useEffect، useState} من"تتفاعل";
وظيفةبرنامج() {
مقدار ثابت [data، setData] = useState ([]) ؛

 useEffect (() => {
 axios.get (' https://jsonplaceholder.typicode.com/posts').ثم((إجابة) => {
 setData (response.data) ؛
 });
 }, []);


يعود (


 </div>
 );
}
يصدّرتقصير برنامج؛

يهيئ الخطاف useState متغير حالة يسمى البيانات بمصفوفة فارغة. ستستخدم وظيفة setData لتحديث الحالة عندما تقوم واجهة برمجة التطبيقات بإرجاع المشاركات.

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

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

1. تثبيت رد فعل ترقيم الصفحات

قم بتشغيل الأمر التالي لتثبيت رد فعل ترقيم الصفحات باستخدام npm.

npm تثبيت رد فعل ترقيم الصفحات

2. قم بتعيين الحالة الأولية للصفحات

استخدم الخطاف useState لتتبع الصفحة الحالية والعدد الإجمالي للصفحات.

مقدار ثابت [currentPage، setCurrentPage] = useState (0);
مقدار ثابت [totalPages، setTotalPages] = useState (0);

يجب عليك أيضًا تحديد العدد الإجمالي للعناصر التي يمكن أن تحتويها الصفحة.

مقدار ثابت itemsPerPage = 10

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

setTotalPages (رياضيات.ceil (response.data.length / itemsPerPage)) ؛

يجب أن يبدو خطاف useEffect الآن كما يلي:

useEffect (() => {
 axios.get (' https://jsonplaceholder.typicode.com/posts').ثم((إجابة) => {
 setData (response.data) ؛
 setTotalPages (رياضيات.ceil (response.data.length / itemsPerPage))
 });
 }, []);

3. حدد وظيفة للتعامل مع تغييرات الصفحة

حدد أولاً متغيرات startIndex و endIndex و subset لعرض المجموعة الفرعية من البيانات بناءً على رقم الصفحة الحالية.

مقدار ثابت startIndex = currentPage * itemsPerPage ؛
مقدار ثابت endIndex = startIndex + itemsPerPage ؛
مقدار ثابت مجموعة فرعية = data.slice (startIndex ، endIndex) ؛

يحسب هذا الرمز قيم startIndex و endIndex بناءً على قيمة حالة الصفحة الحالية وقيمة itemsPerPage. ثم يستخدم هذه المتغيرات لتقسيم مصفوفة البيانات إلى مجموعة فرعية من العناصر.

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

مقدار ثابت handlePageChange = (الصفحة المحددة) => {
 setCurrentPage (selectedPage.selected) ؛
};

إجمالاً ، يجب أن يبدو التطبيق الخاص بك كما يلي:

يستورد أكسيوس من"أكسيوس";
يستورد {useEffect، useState} من"تتفاعل";
وظيفةبرنامج() {
مقدار ثابت [data، setData] = useState ([]) ؛
مقدار ثابت [currentPage، setCurrentPage] = useState (0);
مقدار ثابت [totalPages، setTotalPages] = useState (0);
مقدار ثابت itemsPerPage = 10;


 useEffect (() => {
 axios.get (' https://jsonplaceholder.typicode.com/posts/').ثم((إجابة) => {
 setData (response.data) ؛
 });


 setTotalPages (رياضيات.ceil (response.data.length / itemsPerPage)) ؛
 }, []);


مقدار ثابت startIndex = currentPage * itemsPerPage ؛
مقدار ثابت endIndex = startIndex + itemsPerPage ؛
مقدار ثابت مجموعة فرعية = data.slice (startIndex ، endIndex) ؛


مقدار ثابت handlePageChange = (الصفحة المحددة) => {
 setCurrentPage (selectedPage.selected) ؛
 };


يعود (


 </div>
 );
}
يصدّرتقصير برنامج؛

4. أضف ترقيم الصفحات

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



 {خريطة مجموعة فرعية ((غرض) => (
{item.title} </div>
 ))}
 pageCount = {totalPages}
 onPageChange = {handlePageChange}
 ForcePage = {currentPage}
 />
</div>

هذا يتكرر على العناصر الموجودة في المجموعة الفرعية الحالية ويعرضها ويمرر خصائص pageCount و onPageChange و forceChange إلى ReactPaginate.

تخصيص رد فعل ترقيم الصفحات

يوفر رد فعل ترقيم الصفحات العديد من الدعائم التي تسمح لك بتخصيص مظهر ومظهر مكون ترقيم الصفحات ليلائم احتياجات التطبيق الخاص بك.

وهنا بعض الأمثلة.

  • قم بتخصيص الزرين التالي والسابق باستخدام الدعائم السابقة Label و nextLabel. على سبيل المثال ، يمكنك استخدام تسميات شيفرون كما هو موضح أدناه.
     PreviousLabel = {"<}
     nextLabel = {">>"}
    />
  • قم بتخصيص تسمية الفاصل باستخدام خاصية breakLabel. تسمية الفاصل هي التسمية التي يتم عرضها عندما يكون عدد الصفحات مرتفعًا ، ولا يتمكن مكون ترقيم الصفحات من عرض جميع روابط الصفحة. بدلاً من ذلك ، يعرض فاصلًا ، يمثله تسمية الفاصل ، بين الروابط. هذا مثال يستخدم علامات الحذف.
     breakLabel = {"..."}
    />
  • تخصيص عدد الصفحات لعرضها. إذا كنت لا تريد عرض جميع الصفحات ، يمكنك تحديد عدد الصفحات باستخدام خاصية pageCount. يحدد الكود أدناه عدد الصفحات على أنه 5.
     pageCount = {5}
    />
  • تخصيص الحاوية والفئات النشطة. يمكنك تخصيص أسماء الفئات لحاوية ترقيم الصفحات ورابط الصفحة النشط باستخدام الخاصيتين containerClassName و activeClassName ، على التوالي. يمكنك بعد ذلك تصميم مكون ترقيم الصفحات باستخدام هذه الفئات حتى يناسب مظهر تطبيقك.
     containerClassName = {"حاوية ترقيم الصفحات"}
     activeClassName = {"صفحة نشطة"}
    />

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

تحسين تجربة المستخدم باستخدام ترقيم الصفحات

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

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