ترقيم الصفحات في Vanilla JavaScript

المُقدّمة

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

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

لغرض هذه المقالة ، سنقوم بإحضار المحتوى من مثال على استجابة API. يحتوي على 100 نقطة بيانات ، لكننا سنستخدم 30 فقط ونعرض 6 منشورات على شاشتنا في كل مرة.

كيف تبدأ

قبل جلب جميع المنشورات المطلوبة من واجهة برمجة التطبيقات باستخدام Fetch API المضمنة في المتصفحات ، نحتاج أولاً إلى إنشاء ترميز HTML أساسي يتم ملؤه ديناميكيًا عبر البرنامج النصي لاحقًا:

<div class="container"> <div class="title-section"> <h1 class="title">Posts</h1> </div> <div class="posts-section"></div> <div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul> </div>
</div>

إحضار مشاركات REST API

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

لنبدأ بجلب جميع منشوراتنا أولاً ، ثم سنقوم لاحقًا بتعديل هذا للاستعلام عن بضع نقاط بيانات فقط لكل صفحة:

const postsSection = document.querySelector(".posts-section"); const fetchPosts = async () => { const response = await fetch( "https://jsonplaceholder.typicode.com/posts" ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

دعنا نفحص الكود أعلاه بسرعة. بادئ ذي بدء ، بدأنا بالحصول على div عنصر حيث سنعرض كل المحتوى الخاص بنا عبر class الاسم الذي خصصناه لـ div. أخيرًا ، كتبنا وظيفة للتعامل مع عملية الجلب.

في مجلة fetchPosts() وظيفة ، استخدمنا جلب API لاسترداد المشاركات من JSON العنصر النائب لواجهة برمجة التطبيقات (API).، ثم قم بتخزين بيانات JSON المشار إليها بواسطة ملف posts متغير واستخدام innerHTML لإضافة كل جزء من المحتوى إلى posts-section عن طريق التكرار من خلالهم.

في هذه المرحلة ، نجحنا في جلب كل المحتوى الخاص بنا.

لنبدأ بالإعلان عن ثلاثة متغيرات ضرورية لتطبيق ترقيم الصفحات داخل صفحة الويب الخاصة بنا. أول واحد هو عدد المشاركات التي نريد الإعلان عنها في كل صفحة، ثم رقم الصفحة الحالية (1 بشكل افتراضي) ، و العدد الإجمالي للصفحات.

بالنسبة لهذا الدليل ، سنقدم ملف العدد الإجمالي للصفحات عدد ثابت من 30:

const numberPerPage = 6;
var pageNumber = 1;
var numberOfPages = 30;

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

يعتمد ذلك على التنفيذ المحدد ، ولكنه ممارسة واسعة الانتشار للسماح باستخدام معلمات الاستعلام عند جلب النتائج من واجهات برمجة التطبيقات ، والتي تتيح لك جلب عنصر معين صفحة من النتائج. على سبيل المثال ، تسمح واجهة برمجة تطبيقات REST الوهمية التي نستخدمها بامتداد page و limit المعلمات التي تتيح لك تحميل الدُفعات التي ستظهرها فقط في وقت معين.

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

سنستخدم هذه المعلمات من خلال تعديل طلب الجلب الخاص بنا:

const fetchPosts = async (pageNumber) => { const response = await fetch( `https://jsonplaceholder.typicode.com/posts?_page=${pageNumber}&_limit=${numberPerPage}` ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

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

بالإضافة إلى ذلك ، مررنا أيضًا ملف pageNumber إلى fetchPosts() حتى نتمكن من استدعاء هذه الوظيفة كلما تغيرت الصفحة:

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

سنلاحظ أنه في الترميز كان لدينا قسم يعرض أزرار ترقيم الصفحات:

<div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul>
</div>

نحن الآن بصدد إضافة click الأحداث لكل زر بحيث يظهر المحتوى المخصص لتلك الصفحة عند النقر عليه.

تنفيذ السابق أزرار

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

const prev = document.querySelector('.prev');
prev.addEventListener('click', (e) => { e.preventDefault(); if (pageNumber > 1) { pageNumber--; fetchPosts(pageNumber); }
});

بعد إضافة أ click مستمع الحدث ، لقد تحققنا مما إذا كان رقم الصفحة الحالية أكبر من 1 في وظيفة معاودة الاتصال. إذا كان الرقم يساوي أو أقل من 1، سنستمر في عرض المحتوى الحالي فقط. ولكن إذا كان رقم الصفحة الحالية أكبر من 1 يمكننا إنقاص قيمتها بحرية واستدعاء fetchPosts(pageNumber) تعمل برقم الصفحة الجديد الذي تم تمريره فيها كوسيطة ، وبالتالي تظهر محتوى الصفحة السابقة.

تنفيذ التالى أزرار

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

const next = document.querySelector(".next");
next.addEventListener("click", (e) => { e.preventDefault(); if (pageNumber < numberOfPages) { pageNumber++; fetchPosts(pageNumber); }
});

وفي الختام

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

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

• محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
• بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. الوصول هنا.
• المصدر https://stackabuse.com/pagination-in-vanilla-javascript/