快捷導(dǎo)航

php jquery 實(shí)現(xiàn)新聞標(biāo)簽分類與無(wú)刷新分頁(yè)

更新時(shí)間：2009年12月18日 02:12:18 作者：

php + jquery ui插件 + jquery pager插件實(shí)現(xiàn)新聞的標(biāo)簽分類 + 無(wú)刷新分頁(yè)

現(xiàn)在jquery的應(yīng)用越來(lái)越廣泛了，在很多網(wǎng)站的新聞板塊都實(shí)現(xiàn)了標(biāo)簽分類 + 無(wú)刷新分頁(yè) 的效果。
也自己嘗試寫了一個(gè)，效果圖如下（樣式可以按用戶需求自己去整）：

接下來(lái)詳細(xì)介紹實(shí)現(xiàn)過(guò)程：

我一向是見招拆招的解決思路，這里需要運(yùn)用到3個(gè)東西——標(biāo)簽頁(yè)效果插件和分頁(yè)插件，jquery的getJson請(qǐng)求。

因此我使用了jquery-ui插件，jquery-page插件,現(xiàn)提供下載地址：

jquery_all.rar
里面包含了3個(gè)JS腳本文件和2個(gè)樣式表:
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頁(yè)面代碼如下：

復(fù)制代碼代碼如下:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>php + jquery ui + jquery pager</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>

頁(yè)面對(duì)ajax4.php,ajax5.php,ajax6.php三個(gè)頁(yè)面進(jìn)行了getJson請(qǐng)求，
這3個(gè)頁(yè)面代碼都差不多，無(wú)非是年份的分類而已，我這里沒(méi)做代碼優(yōu)化了，
實(shí)際完全可以放在同一個(gè)頁(yè)面里處理完，請(qǐng)求地址里附帶個(gè)參數(shù)就行了。
ajax.php代碼如下：

復(fù)制代碼代碼如下:

 
<?php 
header("content-type:text/html;charset:utf-8"); 
$db = @ mysql_connect("服務(wù)器主機(jī)地址","數(shù)據(jù)庫(kù)帳號(hào)","數(shù)據(jù)庫(kù)密碼"); 
mysql_select_db("數(shù)據(jù)庫(kù)名"); 
$rs=mysql_query("set names utf8"); 
//如果傳遞了pager參數(shù) 
if(isset($_GET['pager']) && isset($_GET['count'])) 
{ 
echo GetPager($_GET['count'],$_GET['pager']); 
} 
else 
{ 
echo "沒(méi)有傳入?yún)?shù)!"; 
} 

function GetPager($count,$pager) 
{ 
$begin = 開始時(shí)間; 
$end = 結(jié)束時(shí)間; 
$rs=mysql_query("SELECT * FROM 數(shù)據(jù)表 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) 
{ 
//假設(shè) url字段為鏈接地址，title為新聞標(biāo)題，pubdate為發(fā)表時(shí)間 
$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>"; 
//這個(gè)是新聞讀取的數(shù)量，不建議讀取太多 
$num=40; 
//新聞的總頁(yè)數(shù)取整 
$num_string=ceil($num/$count); 
//這里用鍵值對(duì)的方式 返回JSON格式的數(shù)據(jù)，0為新聞總頁(yè)數(shù)，1為拼接的HTML新聞頁(yè)面 
$arr=array("0"=>$num_string, "1"=>$html_string); 
$jarr=json_encode($arr); 
echo $jarr; 
} 
?> 