現在jquery的應用越來越廣泛了，在很多網站的新聞板塊都實現了 標簽分類 + 無刷新分頁 的效果。
我也自己嘗試寫了一個，效果圖如下（樣式可以按用戶需求自己去整）：
接下來詳細介紹實現過程：
我一向是見招拆招的解決思路，這裡需要運用到3個東西——標簽頁效果插件和分頁插件，jquery的getJson請求。
因此我使用了jquery-ui插件，jquery-page插件,請在下面點擊文件名下載。
裡面包含了3個JS腳本文件和2個樣式表:
jquery-1.3.2.min.js
jquery.pager.js
jquery-ui-1.7.2.custom.min.js
jquery-ui-1.7.2.custom.css
page.css
html頁面代碼如下：
Copy to Clipboard
引用的內容：[www.bkjia.com]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>php + jquery ui + jquery pager - Liehuo.Net</title>
<!--幫客之家提示：請注意修改下面的樣式和腳本路徑-->
<link type="text/css" href="/css/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<link rel="stylesheet" href="/css/page.css" type="text/css" />
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script>
<script src="/js/jquery.pager.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('#tabs').tabs();
$.getJSON("ajax4.php",{ pager: 1, count: 10 },function(json){
$("#content1").html(json[1]);
$("#pager1").pager({ pagenumber: 1, pagecount: json[0], buttonClickCallback: PageClick1 });
});
$.getJSON("ajax5.php",{ pager: 1, count: 10 },function(json){
$("#content2").html(json[1]);
$("#pager2").pager({ pagenumber: 1, pagecount: json[0], buttonClickCallback: PageClick2 });
});
$.getJSON("ajax6.php",{ pager: 1, count: 10 },function(json){
$("#content3").html(json[1]);
$("#pager3").pager({ pagenumber: 1, pagecount: json[0], buttonClickCallback: PageClick3 });
});
});
PageClick1 = function(pageclickednumber)
{
TestClick1(pageclickednumber);
}
function TestClick1(pageclickednumber)
{
$.getJSON("ajax4.php",{ pager: pageclickednumber, count: 10 },function(json){
$("#content1").html(json[1]);
$("#pager1").pager({ pagenumber: pageclickednumber, pagecount: json[0], buttonClickCallback: PageClick1 });
});
}
PageClick2 = function(pageclickednumber)
{
TestClick2(pageclickednumber);
}
function TestClick2(pageclickednumber)
{
$.getJSON("ajax5.php",{ pager: pageclickednumber, count: 10 },function(json){
$("#content2").html(json[1]);
$("#pager2").pager({ pagenumber: pageclickednumber, pagecount: json[0], buttonClickCallback: PageClick2 });
});
}
PageClick3 = function(pageclickednumber)
{
TestClick3(pageclickednumber);
}
function TestClick3(pageclickednumber)
{
$.getJSON("ajax6.php",{ pager: pageclickednumber, count: 10 },function(json){
$("#content3").html(json[1]);
$("#pager3").pager({ pagenumber: pageclickednumber, pagecount: json[0], buttonClickCallback: PageClick3 });
});
}
</script>
</head>
<body>
<!-- Tabs -->
<div id="tabs">
<ul>
<li><a href="#tabs-1">2009年</a></li>
<li><a href="#tabs-2">2008年</a></li>
<li><a href="#tabs-3">2007年</a></li>
</ul>
<div id="tabs-1">
<div id="content1" ></div>
<div id="pager1" ></div>
</div>
<div id="tabs-2">
<div id="content2" ></div>
<div id="pager2" ></div>
</div>
<div id="tabs-3">
<div id="content3" ></div>
<div id="pager3" ></div>
</div>
</div>
</body>
</html>
頁面對ajax4.php,ajax5.php,ajax6.php三個頁面進行了getJson請求，
這3個頁面代碼都差不多，無非是年份的分類而已，我這裡沒做代碼優化了，
實際完全可以放在同一個頁面裡處理完，請求地址裡附帶個參數就行了。
Ajax.php代碼如下：
Copy to Clipboard引用的內容：[www.bkjia.com]
<?php
header("content-type:text/html;charset:utf-8");
$db = @ mysql_connect("服務器主機地址","數據庫帳號","數據庫密碼");
mysql_select_db("數據庫名");
$rs=mysql_query("set names utf8");
//如果傳遞了pager參數
if(isset($_GET['pager']) && isset($_GET['count']))
{
echo GetPager($_GET['count'],$_GET['pager']);
}
else
{
echo "沒有傳入參數!";
}
function GetPager($count,$pager)
{
$begin = 開始時間;
$end = 結束時間;
$rs=mysql_query("SELECT * FROM 數據表 WHERE (pubdate BETWEEN $begin AND $end) ORDER BY pubdate DESC limit ".($pager-1)*$count.",".$count);
while ($r=mysql_fetch_assoc($rs))
{
$temp[]=$r;
}
$html_string="<table cellpadding='0' border='0' align='center' width='400' style=' padding: 8px 4px 1px 10px; ' cellpacing='0'>";
foreach($temp as $k=>$v)
{
//假設 url字段為鏈接地址，title為新聞標題，pubdate為發表時間
$html_string.=" <tr height='22'><td valign='middle' width='*' class='tt2'><img align='middle' alt='*' src='/images/bullet.gif'/> <a target='_blank' href='".$v['url']."'>".$v['title']."</a></td><td align='right' width='100'>".$v["pubdate"]."</td></tr>";
}
$html_string.="</table>";
//這個是新聞讀取的數量，不建議讀取太多
$num=40;
//新聞的總頁數取整
$num_string=ceil($num/$count);
//這裡用鍵值對的方式 返回JSON格式的數據，0為新聞總頁數，1為拼接的HTML新聞頁面
$arr=array("0"=>$num_string, "1"=>$html_string);
$jarr=json_encode($arr);
echo $jarr;
}
?>
轉自：http://www.cnblogs.com/tianxin2001x/
