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

دی ۱۶, ۱۳۹۰ توسط : سعید

در این پست به ساخت 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());

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


$("#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());
});
});

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

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


<?php
include('config.php');
$per_page = 9;

//Calculating no of pages
$sql = "select * from paosts";
$result = mysql_query($sql);
$count = mysql_num_rows($result);
$pages = ceil($count/$per_page)
?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery_pagination.js"></script>
<div id="loading" ></div>
<div id="content" ></div>
<ul id="pagination">
<?php
//Pagination Numbers
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
</ul>

در این فایل ابتدا تنظیمات مربوط به اتصال با دیتابیس اینکلود شده.
متغیر$per_page  مشخص میکنه که توی هر صفحه چند ردیف نمایش داده بشه.سپس برای به دست آوردن تعداد صفحات ،بر تعدادکل ردیفهای جدول تقسیم میشه.
•    تابع ciel یک عدد میگیره سپس به سمت بالا رندش میکنه .

فایل pagination_data.php
در این فایل محتویات از دیتابیس خوانده ونمایش داده میشود.

<?php
include('config.php');
$per_page = 9;
if($_GET)
{
$page=$_GET['page'];
}

$start = ($page-1)*$per_page;
$sql = "select * from posts order by id limit $start,$per_page";
$result = mysql_query($sql);
?>
<table width="800px">
<?php
while($row = mysql_fetch_array($result))
{
$id=$row['id'];
$title =$row['title'];
?>
<tr>
<td><?php echo $id; ?></td>
<td><?php echo $title; ?></td>
</tr>
<?php
}
?>
</table> 

در این فایل پس از مشخص کردن نقطه شروع و تعداد ردیفها، از دیتابیس خوانده میشود و در جدول نمایش داده میشود.

فایلهای این پروژه رو میتونید از  اینجا کنید .

منبع : http://www.9lessons.info/2009/09/pagination-with-jquery-mysql-and-php.html
ترجمه : سعید مقدم زاده

بازدید : ۹۰۲۴

Madyar
دی ۱۷, ۱۳۹۰ @ ۱:۱۸ ق.ظ

خیلی ممنون! عالی!!!

پاسخ دادن
Alireza
دی ۲۰, ۱۳۹۰ @ ۳:۳۶ ق.ظ

سلام
واقعا دستتون درد نکنه.خیلی عالی بود.

موفق باشید.

پاسخ دادن
مرتضی
دی ۲۲, ۱۳۹۰ @ ۱۰:۲۳ ب.ظ

مممنون

پاسخ دادن
    سعید
    دی ۲۳, ۱۳۹۰ @ ۱۲:۲۵ ق.ظ

    خواهش میکنم

    پاسخ دادن
اسفند ۱۹, ۱۳۹۰ @ ۴:۰۸ ب.ظ

خیلی قشنگ بود ، می تونین pagination بدون پارامتر آدرس هم یاد بدین؟

پاسخ دادن
    سعید
    اسفند ۲۳, ۱۳۹۰ @ ۵:۱۳ ق.ظ

    خواهش میکنم.
    منظورتون از بدون پارامتر چیه؟

    پاسخ دادن
خرداد ۶, ۱۳۹۱ @ ۲:۳۰ ق.ظ

سلام .
آموزش جالبی بود . ممنون .
اگه بخوایم اینو برای یه سرویس مقاله با کتگوری مختلف اضافه کنیم برای اینکه کتگوری رو دریافت کنه و فقط اونو از دیتا بیس بکشه چه کاری باید انجام داد ؟
قسمت php و mysql رو بلدم ولی بخش جی کوئری و آزاکس رو ممنون میشم توضیح بدید که چه طوری کتگوری رو با دستور get یا post دریافت و سفارشی کنه.

با تشکر.

پاسخ دادن
    سعید
    خرداد ۷, ۱۳۹۱ @ ۱۱:۰۱ ب.ظ

    این فقط یه آموزش برای یادگیری نحوه کارکرد صفحه بندی با جی کوئری بود.
    برای پروژه هاتون میتونید یکی از پلاگینهای معرفی شده در لینک زیر رو انتخاب کنید
    http://www.jquery4u.com/plugins/10-jquery-pagination-plugins/

    موفق باشید

    پاسخ دادن
      نيکدل
      مهر ۱۸, ۱۳۹۱ @ ۱۰:۰۸ ق.ظ

      سلام
      این ها بصورت html است چطوری میشه اونها رو به بانک وصل کرد لطفا توضیح دهید.

      پاسخ دادن
عباس
مرداد ۳۰, ۱۳۹۱ @ ۱۰:۱۷ ق.ظ

لینک دانلود پروژه کار نمیکنه

پاسخ دادن

پاسخ دهید

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


*