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

[Mr.Moqadam]

در این پست به ساخت pagination یا نحوه صفحه بندی مطالب به صورت Ajax ( ای جکس ) میپردازیم. برای این کار از jQuery و PHP استفاده میکنیم.

ساخت دیتابیس
در ابتدا یک دیتابیس میسازیم.

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

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

$(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() : عکس مربوط به بارگذاری اطلاعات رو مخفی میکنه .

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

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


ادامه آموزش رو در اینجا ببینید