ساخت pagination با jQuery و PHP به صورت Ajax

شروع موضوع توسط Mr.Moqadam ‏24 ژانویه 2012 در انجمن مقالات و آموزش‌ها

کلمات کلیدی:
  1. Mr.Moqadam

    Mr.Moqadam New Member

    ارسال‌ها:
    4
    تشکر شده:
    5
    امتیاز دستاورد:
    1
    در این پست به ساخت pagination یا نحوه صفحه بندی مطالب به صورت Ajax ( ای جکس ) میپردازیم. برای این کار از jQuery و PHP استفاده میکنیم.
    [​IMG]
    ساخت دیتابیس
    در ابتدا یک دیتابیس میسازیم.
    PHP:

    CREATE TABLE posts
    (
    id INT PRIMARY KEY AUTO_INCREMENT,
    title TEXT
    );

     
    برای تست چند ردیف رو به جدول اضافه کنید.
    ساخت jquery_pagination.js
    یک فایل جاوااسکریپت ایجاد کنید و محتوای زیر رو داخلش کپی کنید .
    PHP:


    $(document).ready(function()
    {
    //Display Loading Image
    function Display_Load()
    {
    $("#loading").fadeIn(900,0);
    $("#loading").html("<img src="bigLoader.gif" />");
    }
    //Hide Loading Image
    function Hide_Load()
    {
    $("#loading").fadeOut('slow');
    };
    //Default Starting Page Results
    $("#pagination li:first")
    .css({'color' : '#FF0084'}).css({'border' : 'none'});
    Display_Load();
    $("#content").load("pagination_data.php?page=1", Hide_Load());
    //Pagination Click
    $("#pagination li").click(function(){
    Display_Load();
    //CSS Styles
    $("#pagination li")
    .css({'border' : 'solid #dddddd 1px'})
    .css({'color' : '#0063DC'});

    $(this)
    .css({'color' : '#FF0084'})
    .css({'border' : 'none'});
    //Loading Data
    var pageNum = this.id;
    $("#content").load("pagination_data.php?page=" + pageNum, Hide_Load());
    });
    });

     
    تابع Display_Load() : این تابع عکی مربوط به بارگذاری اطلاعات رو نمایش میده.
    تابع Hide_Load() : عکس مربوط به بارگذاری اطلاعات رو مخفی میکنه .
    PHP:


    $("#pagination li:first")
    .css({'color' : '#FF0084'}).css({'border' : 'none'});
    Display_Load();
    $("#content").load("pagination_data.php?page=1", Hide_Load());

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


    ادامه آموزش رو در اینجا ببینید
     
    نوشته شده توسط Mr.Moqadam در ‏24 ژانویه 2012
    abbasfisal از این پست تشکر کرده است.

به اشتراک بگذارید