50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

ساخت صفحه بندی infinite scroll با PHP و jQuery

ساخت صفحه بندی infinite scroll با PHP و jQuery

هر روز ما تغییرات انقلابی را با نوآوری در طراحی وب می بینیم. تغییراتی مثل infinite Scroll صفحه,  برای همیشه صفحه بندی را تغییر دادند.

امروزه سایت های زیادی از صفحه بندی infinite scroll (اسکرول بی نهایت) در UI  اصلی سایت استفاده می کنند. افکت infinite scroll صفحه بندی سنتی با شماره های صفحه و لینک های ناوبری, جایگزین شده است.

دیدن نتیجه صفحات صفحه بندی شده با لینک های ناوبری معمول, تقریبا قدیمی و منسوخ شده است.

در این آموزش قصد داریم به شما نحوه ساخت صفحه بندی infinite scroll با PHP و jQuery را نشان بدیم.

 

در آموزش های قبلی, مثالی از صفحه بندی با ajax و php را دیدیم. همچنین یک مثال از صفحه بندی را بدون استفاده از ajax در بارگذاری محتوای داینامیک با jQuery را مشاهده کردیم.

با داشتن کد منبع مثال ها بالا می تواینم قابلیت لود محتوا را با صفحه بندی infinite scroll پیاده سازی کنیم.

 

من از PHP , MySQL و jQuery در این مثال برای این نوع لود محتوای داینامیک استفاده کردم.

با انجام رویداد اسکرول صفحه, درخواست ایجکس برای دسترسی به فایل PHP برای ارسال offset صفحه اجرا می شود. در فایل PHP , انحراف (offset) و دیگر پارامترها با متد درخواست مناسب دریافت می شود.

این پارامترها و ثابت های هر صفحه برای محاسبه لیمیت کوئری به منظور دریافت داده ها بصورت داینامیک از دیتابیس محاسبه می شود.

 

HTML دربرگیرنده برای لود داینامیک

کد HTML زیر جی کوئری را برای اجرا اسکریپت AJAX به منظور دریافت نتیجه دیتابیس بدون رفرش صفحه, اجرا می کند.

در این HTML , یک container برای لود داینامیک داده های دریافتی از طریق درخواست AJAX است.

در شروع, اولین بلاک داده ها از دیتابیس خواهده می شود. و سپس, درخواست ایجکس بعدی محتوای دریافتی را به پایین محتوای از قبل وجود داشته اضافه (append) می کند.

کد jQuery برای لود محتوا با اسکرول صفحه

اسکریپت AJAX به هندلر رویداد scroll روی سلکتور $(window) اضافه شده است.

این اسکریپت اولین بار زمانی که کاربر به پایین صفحه اسکرول می کند و پایین صفحه را لمس می کند, اجرا می شود.

با هر اسکرول, آفست صفحه آپدیت و در یکی فیلد مخفی قرار میگیرد. این آفست با درخواست AJAX به فایل PHP برای استفاده در کوئری SQL و دریافت داده ها از دیتابیس استفاده می شود.

در صورت موفقیت آمیز بودن درخواست AJAX , داده دریافتی به محتوای صفحه اضافه می شود.

در هنگام اجرا شدن درخواست AJAX , یک تصویر loader نیز به کاربر برای انتضار نمایش داده میشود .

خواندن آخرین پست ها توسط PHP

در اول این کد PHP اتصال به دیتابیس را ایجاد می کنیم. در اینجا پارامترهای ارسال شده توسط AJAX را دریافت و کویری limit را با آفست صفحه و limit آن به ازای هر صفحه را محاسبه می کنیم.

با کوئری محاسبه شده, داده ها را از دیتابیس mysql واکشی (fetch) می کنیم و نتیجه را به عنوان پاسخ ajax برگشت می دهیم.

اسکریپت دیتابیس

کد SQL زیر برای ساخت جداول دیتابیس و قرار دادن داده هایی که قرار است خوانده و بصورت داینامیک با رویداد اسکرول صفحه لود شود, استفاده شده است.

خروجی صفحه بندی infinite scroll با PHP و jQuery

اسکرین شات زیر لود داینامیک محتوا را نشان می دهد. آیکون loader نیز هنگام ارسال درخواست به فایل PHP نمایش داده می شود.

همینکه محتوا اضافه شد, این پیام مخفی میشود.

ساخت صفحه بندی infinite scroll با PHP و jQuery

امیدوارم از آموزش ساخت preloader با جی کوئری و CSS3 نهایت استفاده را برده باشید.

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۱۰)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. ali ۶ آبان ۱۳۹۹

    سلام خیلی ممنون ، بسیار عالی و کاربردی
    فقط شما هم می تونید به جای دریافت اطلاعات در javascript از html با input
    از خود php استفاده کنید .
    function windowOnScroll() {
    “<? ; var total_count= "<? php echo $total_count
    ….

    پاسخ
    1. حسن شفیعی ۶ آبان ۱۳۹۹

      سلام. خوشحالیم که مفید واقع شده.
      موفق باشید.

      پاسخ
  2. amir ۱۸ مرداد ۱۳۹۹

    سلام
    فکر کنم کد ajax و جاوا مشکل داره چون وقتی اسکرول پایین میاری مطالب جدید نمیاره و روی حالت لود میمونه

    پاسخ
    1. amir ۱۹ مرداد ۱۳۹۹

      میشه راهنمایی کنید مشکل از کجا؟

      پاسخ
    2. حسن شفیعی ۱۹ مرداد ۱۳۹۹

      سلام.
      لطفا f12 رو داخل مرورگر بزنید و بعد در تب console ببینید چه اروری دریافت می کنید.

      پاسخ
      1. amir ۱۹ مرداد ۱۳۹۹

        داخل console هیچ خطایی وجود نداره مرورگر هم عوض کردم ولی تغییری حاصل نشد ممکن خودتون یک بررسی بکنید
        به کدش خیلی لازم دارم.
        باتشکر

        پاسخ
      2. amir ۱۹ مرداد ۱۳۹۹

        سلام
        داخل console اصلا خطایی وجود نداره و فکر کنم یکجا کد جاوا اسکریپت مشکل داره داخل ادرس زیر اسکریپت قرار دادم:
        http://sibup.ir/test
        ممنونم میشم کد یک بررسی بکنید چون خیلی به این برنامه نیاز دارم

        پاسخ
      3. حسن شفیعی ۲۰ مرداد ۱۳۹۹

        سلام. بله الان بررسی کردم تابع مربوطه داخل فایل index.php در سورس بخش باکس دانلود برای تست کامنت شده بود و برای همین اطلاعات جدید خونده نمی شد.
        از ابتدا از طریق باکس دانلود فایل رو دریافت و فایل index.php رو جایگزین کنید

        پاسخ
  3. محمد باقر مقصودی ۲۹ آبان ۱۳۹۷

    من کد بالا رو اجرا کردم البته تو فایر فاکس f12 زدم صفحه رو کوچیک کردم ، برنامه وارد زیر برنامه windowOnScroll() اصلا تجرا نمیشه .
    میشه راهنماییم کنید البته

    پاسخ
    1. حسن شفیعی ۲۹ آبان ۱۳۹۷

      سلام. اگر داخل بلاک تابع موردنظر رو ببینید متوجه این شرط خواهید شد if ($(window).scrollTop() == $(document).height() - $(window).height()){ و حتما باید توجه داشته باشید که ما اسکرول رو بر اساس ارتفاع سند و ارتفاع پنجره مرورگر محاسه می کنیم.

      موفق باشید.

      پاسخ
دوره های آموزشی

دانلود رایگان کتاب آموزش PHP

صفر تا صد PHP و MySQL را یکجا یاد بگیرید
همین الان دانلود کن
نگران نباشید. ایمیل‌های مزاحم نمی‌فرستیم
close-link