|
 |
| |
ทำมาเเจกค้าบ ! PAGE NAVIGATOR AJAX+JQUERY ^_^ ลองเล่นกันได้นะค้าบ |
| |
 |
|
|
 |
 |
|
ทำไว้เผื่อมีใครสนใจนำไปใช้ Jquery นี่น่ารักจริงๆ 55^_^
อ้างอิงจากบทความ : http://www.ninenik.com/
ReSearch Tag : แสดงการแบ่งหน้า
Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP PAGE NAVIGATOR</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
$(".browse_page a").live("click",function(event){
event.preventDefault();
var url=$(this).attr("href");
$("#showData").animate({ //สามารถนำ Effect มาเปลี่ยนได้
opacity:0
},100,function(){
$("#showData").load(url,function(){
$("#showData").animate({
opacity:1
},200);
});
});
return false;
});
});
</script>
<style type="text/css">
.browse_page{
clear:both;
margin-left:12px;
height:35px;
margin-top:5px;
display:block;
}
.browse_page a,.browse_page a:hover{
display:block;
height:18px;
width:18px;
font-size:10px;
float:left;
margin-right:2px;
border:1px solid #CCCCCC;
background-color:#F4F4F4;
color:#333333;
text-align:center;
line-height:18px;
font-weight:bold;
text-decoration:none;
}
.browse_page a:hover{
border:1px solid #0A85CB;
background-color:#0A85CB;
color:#FFFFFF;
}
.browse_page a.selectPage{
display:block;
height:18px;
width:18px;
font-size:10px;
float:left;
margin-right:2px;
border:1px solid #0A85CB;
background-color:#0A85CB;
color:#FFFFFF;
text-align:center;
line-height:18px;
font-weight:bold;
}
.browse_page a.SpaceC{
display:block;
height:18px;
width:18px;
font-size:10px;
float:left;
margin-right:2px;
border:0px dotted #0A85CB;
font-size:11px;
background-color:#FFFFFF;
color:#333333;
text-align:center;
line-height:18px;
font-weight:bold;
}
.browse_page a.naviPN{
width:50px;
font-size:12px;
display:block;
height:18px;
float:left;
border:1px solid #0A85CB;
background-color:#0A85CB;
color:#FFFFFF;
text-align:center;
line-height:18px;
font-weight:bold;
}
</style>
</head>
<body>
<?php
$link=mysql_connect("localhost","root","1234");
mysql_select_db("ex_jquery");
mysql_query("set character set utf8");
?>
<?php
// สร้างฟังก์ชั่น สำหรับแสดงการแบ่งหน้า
function page_navigator($before_p,$plus_p,$total,$total_p,$chk_page){
global $e_page;
global $querystr;
$urlfile="index.php"; // ส่วนของไฟล์เรียกใช้งาน ด้วย ajax (ajax_dat.php)
$per_page=10;
$num_per_page=floor($chk_page/$per_page);
$total_end_p=($num_per_page+1)*$per_page;
$total_start_p=$total_end_p-$per_page;
$pPrev=$chk_page-1;
$pPrev=($pPrev>=0)?$pPrev:0;
$pNext=$chk_page+1;
$pNext=($pNext>=$total_p)?$total_p-1:$pNext;
$lt_page=$total_p-4;
if($chk_page>0){
echo "<a href='$urlfile?s_page=$pPrev&querystr=".$querystr."' class='naviPN'>Prev</a>";
}
for($i=$total_start_p;$i<$total_end_p;$i++){
$nClass=($chk_page==$i)?"class='selectPage'":"";
if($e_page*$i<=$total){
echo "<a href='$urlfile?s_page=$i&querystr=".$querystr."' $nClass >".intval($i+1)."</a> ";
}
}
if($chk_page<$total_p-1){
echo "<a href='$urlfile?s_page=$pNext&querystr=".$querystr."' class='naviPN'>Next</a>";
}
}
?>
<div id="showData" style="width:550px;margin:auto;padding:10px;border:1px solid #CCC;">
<? /////////////////////////////////////////////////////////////////////////////// ?>
<ul>
<?php
$q="select * from members where 1";
$q.=" ORDER BY id ";
$qr=mysql_query($q);
$total=mysql_num_rows($qr);
$e_page=10; // กำหนด จำนวนรายการที่แสดงในแต่ละหน้า
if(!isset($_GET['s_page'])){
$_GET['s_page']=0;
}else{
$chk_page=$_GET['s_page'];
$_GET['s_page']=$_GET['s_page']*$e_page;
}
$q.=" LIMIT ".$_GET['s_page'].",$e_page";
$qr=mysql_query($q);
if(mysql_num_rows($qr)>=1){
$plus_p=($chk_page*$e_page)+mysql_num_rows($qr);
}else{
$plus_p=($chk_page*$e_page);
}
$total_p=ceil($total/$e_page);
$before_p=($chk_page*$e_page)+1;
?>
<? /////////////////////////////////////////////////////////////////////////////// ?>
<?php
while($rs=mysql_fetch_array($qr)){
?>
<li><?=$rs['name']?></li>
<? /////////////////////////////////////////////////////////////////////////////// ?>
<?php } ?>
</ul>
<?php if($total>0){ ?>
<? /////////////////////////////////////////////////////////////////////////////// ?>
<div class="browse_page">
<?php
// เรียกใช้งานฟังก์ชั่น สำหรับแสดงการแบ่งหน้า
page_navigator($before_p,$plus_p,$total,$total_p,$chk_page);
?>
</div>
<?php } ?>
</div>
</body>
</html>
Code (PHP)
-- phpMyAdmin SQL Dump
-- version 2.10.3
-- http://www.phpmyadmin.net
--
-- โฮสต์: localhost
-- เวลาในการสร้าง:
-- รุ่นของเซิร์ฟเวอร์: 5.0.51
-- รุ่นของ PHP: 5.2.6
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--
-- ฐานข้อมูล: `ex_jquery`
--
-- --------------------------------------------------------
--
-- โครงสร้างตาราง `members`
--
CREATE TABLE `members` (
`id` int(11) NOT NULL auto_increment,
`name` varchar(500) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=tis620 AUTO_INCREMENT=27 ;
--
-- dump ตาราง `members`
--
INSERT INTO `members` (`id`, `name`) VALUES (1, 'A');
INSERT INTO `members` (`id`, `name`) VALUES (2, 'B');
INSERT INTO `members` (`id`, `name`) VALUES (3, 'C');
INSERT INTO `members` (`id`, `name`) VALUES (4, 'D');
INSERT INTO `members` (`id`, `name`) VALUES (5, 'E');
INSERT INTO `members` (`id`, `name`) VALUES (6, 'F');
INSERT INTO `members` (`id`, `name`) VALUES (7, 'G');
INSERT INTO `members` (`id`, `name`) VALUES (8, 'H');
INSERT INTO `members` (`id`, `name`) VALUES (9, 'I');
INSERT INTO `members` (`id`, `name`) VALUES (10, 'G');
INSERT INTO `members` (`id`, `name`) VALUES (11, 'K');
INSERT INTO `members` (`id`, `name`) VALUES (12, 'L');
INSERT INTO `members` (`id`, `name`) VALUES (13, 'M');
INSERT INTO `members` (`id`, `name`) VALUES (14, 'N');
INSERT INTO `members` (`id`, `name`) VALUES (15, 'O');
INSERT INTO `members` (`id`, `name`) VALUES (16, 'P');
INSERT INTO `members` (`id`, `name`) VALUES (17, 'Q');
INSERT INTO `members` (`id`, `name`) VALUES (18, 'R');
INSERT INTO `members` (`id`, `name`) VALUES (19, 'S');
INSERT INTO `members` (`id`, `name`) VALUES (20, 'T');
INSERT INTO `members` (`id`, `name`) VALUES (21, 'U');
INSERT INTO `members` (`id`, `name`) VALUES (22, 'V');
INSERT INTO `members` (`id`, `name`) VALUES (23, 'W');
INSERT INTO `members` (`id`, `name`) VALUES (24, 'X');
INSERT INTO `members` (`id`, `name`) VALUES (25, 'Y');
INSERT INTO `members` (`id`, `name`) VALUES (26, 'Z');
Tag : PHP, MySQL, Ajax, jQuery
|
ประวัติการแก้ไข
2013-06-14 01:12:29
2013-06-14 01:15:54
2013-06-14 01:51:02
|
 |
 |
 |
 |
| Date :
2013-06-14 01:10:56 |
By :
biggest59 |
View :
1378 |
Reply :
6 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ก็ควรจะใส่ Back Link ให้เค้าด้วยนะครับ
|
| |
|
|
| |
| Date :
2013-06-14 01:35:41 |
By :
PlaKriM |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
 เป็นการนำมา Adap ที่ดีมากเลยครับผม 
#น้ำใจเล็ก ๆ น้อย ๆ จะนำพาสู่หนทางยิ่งใหญ่
|
| |
|
|
| |
| Date :
2013-06-14 06:30:42 |
By :
deawx |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 03
|
