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


Posted in PHP onDecember 18, 2009

现在jquery的应用越来越广泛了,在很多网站的新闻板块都实现了 标签分类 + 无刷新分页 的效果。
也自己尝试写了一个,效果图如下(样式可以按用户需求自己去整):

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

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

我一向是见招拆招的解决思路,这里需要运用到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> 
<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>

页面对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' 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; 
} 
?>

jquery_all.rar 
PHP 相关文章推荐
php学习之 循环结构实现代码
Jun 09 PHP
PHP中全面阻止SQL注入式攻击分析小结
Jan 30 PHP
如何在PHP中使用正则表达式进行查找替换
Jun 13 PHP
php操作xml
Oct 27 PHP
php object转数组示例
Jan 15 PHP
php遍历文件夹下的所有文件和子文件夹示例
Mar 20 PHP
PHP动态生成javascript文件的2个例子
Apr 11 PHP
PHP魔术方法的使用示例
Jun 23 PHP
jquery+php实现导出datatables插件数据到excel的方法
Jul 06 PHP
PHP CURL post数据报错 failed creating formpost data
Oct 16 PHP
php+ajax+json 详解及实例代码
Dec 12 PHP
PHP开发api接口安全验证操作实例详解
Mar 26 PHP
PHP XML操作类DOMDocument
Dec 16 #PHP
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
Dec 16 #PHP
php生成xml简单实例代码
Dec 16 #PHP
PHP 基本语法格式
Dec 15 #PHP
php遍历目录viewDir函数
Dec 15 #PHP
php csv操作类代码
Dec 14 #PHP
PHP开发过程中常用函数收藏
Dec 14 #PHP
You might like
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
python中set常用操作汇总
2016/06/30 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
python中subprocess批量执行linux命令
2018/04/27 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
CSS3绘制不规则图形的一些方法示例
2015/11/07 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
一套.net面试题及答案
2016/11/02 面试题
个人自我鉴定怎么写
2013/10/28 职场文书
工程班组长岗位职责
2013/12/30 职场文书
竞聘演讲稿范文
2014/01/12 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
母亲节寄语大全
2015/02/27 职场文书
以权谋私检举信范文
2015/03/02 职场文书
村官个人总结范文
2015/03/03 职场文书
css3新特性的应用示例分析
2022/03/16 HTML / CSS