php jquery 实现新闻标签分类与无刷新分页

摘要：现在jquery的应用越来越广泛了，在很多网站的新闻板块都实现了标签分类+无刷新分页的效果。也自己尝试写了一个，效果图如下（样式可以按用户需...

现在jquery的应用越来越广泛了，在很多网站的新闻板块都实现了标签分类 + 无刷新分页的效果。

也自己尝试写了一个，效果图如下（样式可以按用户需求自己去整）：

php jquery 实现新闻标签分类与无刷新分页1

接下来详细介绍实现过程：

我一向是见招拆招的解决思路，这里需要运用到3个东西——标签页效果插件和分页插件，jquery的getJson请求。

因此我使用了jquery-ui插件，jquery-page插件,现提供下载地址：

jquery_all.rar

里面包含了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页面代码如下：

复制代码代码如下:

<html>

<head>

<title>php + jquery ui + jquery pager</title>

$(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>

<ul>

</ul>

</div>

</div>

</div>

</body>

</html>

页面对ajax4.php,ajax5.php,ajax6.php三个页面进行了getJson请求，

这3个页面代码都差不多，无非是年份的分类而已，我这里没做代码优化了，

实际完全可以放在同一个页面里处理完，请求地址里附带个参数就行了。

ajax.php代码如下：

复制代码代码如下:

<?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' cellpacing='0'>";

foreach($temp as $k=>$v)

{

//假设 url字段为链接地址，title为新闻标题，pubdate为发表时间

$html_string.=" <tr height='22'><td valign='middle' width='*'><img align='middle' alt='*' src='http://www.jb51.netimages/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;

}

jquery_all.rar