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

现在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

赞 (0)

相关推荐

  • ThinkPHP分页类使用详解

    一.首先需要在MsgManage控制器中加入分页方法 知识点:1.count函数的试用2.Page类实例化操作及相关参数了解3.limit函数了用4.show函数了解 编辑文件admin/Lib/Action/MsgManageAction.class.php 代码如下: 复制代码 代码如下: class MsgManageAction extends CommonAction {    public function index(){     import('ORG.Util.Page'); 

  • php中分页及SqlHelper类用法实例

    php中分页及SqlHelper类用法实例

    本文实例讲述了php中分页及SqlHelper类用法.分享给大家供大家参考,具体如下: 文档目录结构如下: SqlHelper.php代码如下: <?php /** * Created by JetBrains PhpStorm. * User: lee * Date: 13-7-26 * Time: 下午8:30 * To change this template use File | Settings | File Templates. */ class SqlHelper{ private

  • PHP实现PDO的mysql数据库操作类

    本文实例讲述了PHP实现PDO的mysql数据库操作类.分享给大家供大家参考.具体分析如下: dbconfig类负责配置数据库访问信息,包括:服务器地址.端口.数据库实例名.用户名.用户密码.字符集等. dbtemplate类集合了对数据库的访问操作,主要有以下几个操作: 1. queryrows:返回多行记录 2. queryrow:返回为单条记录 3. queryforint:查询单字段,返回整数 4. queryforfloat:查询单字段,返回浮点数(float) 5. queryfor

  • PHP以mysqli方式连接类完整代码实例

    本文所述的是一个在PHP中以mysqli方式连接数据库的一个数据库类实例,该数据库类是从一个PHP的CMS中整理出来的,可实现PHP连接数据库类,MySQLi版,兼容PHP4,对于有针对性需要的朋友可根据此代码进行优化和修改. <?php #================================================================================================== # Filename: /db/db_mysqli.php

  • php 分页类 扩展代码

    原来发表过一个脱离数据库的分页类,最近使用的时候发现有些时候搜索的东西过于大的时候,采用url传递参数的方式,可能会有一定的影响或者叫已知的bug,这次做了一些扩展,同时兼容了以前的模式,使用上面很简单的,只需要多设置一个参数就可以了代码如下: 复制代码 代码如下: <?php /** * 功能: 分页类,根据提供的数据总量和页面大小 * 创建日期:Fri Apr 20 16:45:21 CST 2007 * 最后更新: * 作者: sanshi <sanshi0815@tom.com>

  • 高效mongodb的php分页类（不使用skip）

    mongodb分页skip+limit分页要先查出所有结果再去跳过,这样如果查询页面越往后效率越低. 如果能够通过查询条件查出每页结果的最后一条记录,在用最后一条记录作为查询条件去查下一页,这样每次都查询页面size条记录,效率不会差. 具体代码如下:包含mongodb.class.php, page.class.php, test.php mongodb.class.php mongodb 操作类 复制代码 代码如下: <?php function show_error($message, $

  • PHP通用分页类page.php[仿google分页]

    page.php 复制代码 代码如下: <?php /** ** 通用php分页类.(仿Google样式) ** 只需提供记录总数与每页显示数两个参数.(已附详细使用说明..) ** 无需指定URL,链接由程序生成.方便用于检索结果分页. ** 表单采用GET方法提交,可保证在诸如查询之,删除之类的操作时,不丢失URL参数 **/ class Pager{ //IE地址栏地址 var $url; //记录总条数 var $countall; //总页数 var $page; //分页数字链接 v

  • 仿dedecms下拉分页样式修改的thinkphp分页类实例

    仿dedecms下拉分页样式修改的thinkphp分页类实例

    本文实例讲述了仿dede下拉分页样式修改的thinkphp分页类.分享给大家供大家参考.具体实现方法如下: 修改thinkphp分页类:如下拉列表式分页(类似dedecms分页): 纯html代码: 复制代码 代码如下: <select name="sldd" style="width:36px" onchange="location.href=this.options[this.selectedIndex].value;"> <

  • php下mysql数据库操作类(改自discuz)

    复制代码 代码如下: <?php /* -------------------------------- System:PT book - PT小说小偷 Code: 杰少Pakey ----------------------------------- */ $pt_mysql = new dbQuery; /** * mysql查询类 * */ class dbQuery { /** * 查询总次数 * * @var int */ var $querynum = 0; /** * 连接句柄 *

  • PHP+Mysql树型结构（无限分类）数据库设计的2种方式实例

    PHP+Mysql树型结构（无限分类）数据库设计的2种方式实例

    我们经常需要在关系型数据库中保存一些树状结构数据,比如分类.菜单.论坛帖子树状回复等.常用的方法有两种: 1. 领接表的方式: 2. 预排序遍历树方式: 假设树状结构如下图: 领接表方式 主要依赖于一个 parent 字段,用于指向上级节点,将相邻的上下级节点连接起来,id 为自动递增自动,parent_id 为上级节点的 id.一目了然,"Java"是"Language"的子节点. 我们要显示树,PHP 代码也可以很直观,代码如下: 复制代码 代码如下: <

随机推荐