الدرس 8 من 8

التقسيم إلى صفحات

هدف الدرس

رقم في الحالة، وقصّ عند الرسم

01

الشرح

قائمة من ألف عنصر لا تُعرض دفعة واحدة. التقسيم يحفظ في الحالة رقمًا واحدًا هو الصفحة الحالية، ويشتقّ منه الباقي عند الرسم: من أين يبدأ القصّ، وكم صفحة إجمالًا، وأيّ زرّ يُعطَّل.

الحساب سطران: start = (page - 1) * PER_PAGE ثم items.slice(start, start + PER_PAGE). وslice لا يعدّل الأصل ولا يشكو إن تجاوزت النهاية، فالصفحة الأخيرة الناقصة تخرج صحيحة وحدها.

والأخطاء كلّها عند الحدود: عدد الصفحات بـ Math.floor يُضيّع الصفحة الأخيرة الناقصة، فـ 23 عنصرًا تحتاج Math.ceil(23 / 5) أي 5 صفحات لا 4. وزرّ «التالي» الفعّال في الأخيرة يقود إلى صفحة فارغة.

02

المطلوب

اعرض خمسة عناصر من الصفحة state.page (تبدأ من 1)، واكتب في #info «صفحة 1 من 5»، وعطّل #prev في الأولى و#next في الأخيرة، واجعل الزرّين يغيّران state.page ثم يعيدان الرسم.

معايير التصحيح

6 معايير
  1. الأولى تعرض «منتج 1» إلى «منتج 5» فقط
  2. «التالي» ينقل إلى الخمسة التالية
  3. الأخيرة تعرض الثلاثة الباقية
  4. «السابق» معطَّل في الأولى و«التالي» في الأخيرة
  5. النصّ يعلن الموقع: «صفحة 1 من 5»
  6. الرسم يتبع state.page وحدها
index.html
المعاينة
index.html100%
–/6

اضغط «تشغيل» ليبدأ الفحص.

6 معايير في بطاقة «المطلوب».