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

ژانویه 6, 2012 توسط : سعید

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


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

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

[/sql]

برای تست چند ردیف رو به جدول اضافه کنید.

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

[javascript]

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

[/javascript]

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

[javascript]

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

[/javascript]

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

[javascript]

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

[/javascript]

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

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

[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>

[/php]

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

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

[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> [/php]

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

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

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

Madyar
ژانویه 7, 2012 @ 1:18 ق.ظ

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

پاسخ
Alireza
ژانویه 10, 2012 @ 3:36 ق.ظ

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

موفق باشید.

پاسخ
مرتضی
ژانویه 12, 2012 @ 10:23 ب.ظ

مممنون

پاسخ
    سعید
    ژانویه 13, 2012 @ 12:25 ق.ظ

    خواهش میکنم

    پاسخ
مارس 9, 2012 @ 4:08 ب.ظ

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

پاسخ
    سعید
    مارس 13, 2012 @ 5:13 ق.ظ

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

    پاسخ
می 26, 2012 @ 2:30 ق.ظ

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

با تشکر.

پاسخ
    سعید
    می 27, 2012 @ 11:01 ب.ظ

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

    موفق باشید

    پاسخ
      نيکدل
      اکتبر 9, 2012 @ 10:08 ق.ظ

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

      پاسخ
عباس
آگوست 20, 2012 @ 10:17 ق.ظ

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

پاسخ

دیدگاهتان را بنویسید

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


*