تطبيق مفهوم التحميل المستمر للصفحة (Infinite page scroll)

يمكنك عمل ما تريد عن طريق java script لا تحتاج إلى كتابة إي كود على السيرفر, مثلاً يمكنك استخدام Infinite Scroll jQuery Plugin , الشرح و طريقة العمل موضحة بشكل كامل في الرابط التالي:

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

في حال وصول السكرول إلى نهاية الصفحة استدعي كود يقوم بتحميل المزيد

الأمر بحاجة فقط إلى خبرة javascript وبالتأكيد jquery ستختصر الكثير من الوقت....

http://stackoverflow.com/questions/8220267/jquery-detect-scroll-at-bottom

عند التأكد من وصول السكرول إلى نهاية الصفحة قم بطلب ajax و أضف النتيجة إلى ال div أو table المسؤولة عن العرض

$('#mydiv').append(result);

حيث result هي نتيجة طلب ajax الذي يحتوي على البيانات الجديدة.

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

الفكرة :

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

مثال عملي:

var resultPerQuery = 20;

var currentPage = 0;

عند الاتصال لاول مرة بتنفيذ التالي الاتصال عن طريق الاجاكس كالتالي

var start = currentPage*resultPerQuery;

ومن ثم تقوم بارسال المتغير start والمتغير resultPerPage الى صفحة الخادم

وتستدعي من قاعدة البيانات في صفحة الخادم كالتالي

select * from table limit $start,$resultPerPage;

وعند نزول المستخدم للاسفل تقوم فقط بزيادة قيمة المتغير currentPage كالتالي

currentPage += 1;

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

ولا تنسى انه عند اكتمال الاستدعاء ان تقوم بعمل append من خلال الجافاسكربت الى اسفل الجدول الذي يتم فيه عرض البيانات

تأكد من ان لا تضع اشياء مهمة بعد نهاية السكرول , التحميل الاوتوماتيكي سيجعل المحتوى صعب الوصول على المستخدم ...