PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用


Posted in PHP onOctober 09, 2015

jPaginate是基于jQuery的动感滚动分页插件,它的表现形式是像分页的按钮一样,非常有意思的是这些按钮却可以滚动,可以通过单击或鼠标滑向点两侧的小箭头来控制按钮的前后滚动。

 PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用

调用jPaginate插件的方法很简单:

$(elementID).paginate()

属性设置
可喜的是,jPaginate提供了很多属性配置,您可以轻易的定制想要的分页效果。
设置方法如:

$(elementID).paginate({ 
    count:80, 
    start:1, 
    ... })

count: 数字,总记录数。
start: 数字,开始显示的页数,如:3表示从第3页开始。
display: 数字,分页条显示的页数,如:5表示一次显示5个页码数。
border: 是否显示页码的边框。(true/false)
border_color: 设置边框的颜色,如"#d3d3d3"。
text_color: 设置页码的颜色,如"#68ba64"。
background_color: 设置页码的背景色,如"#f7f7f7"。
border_hover_color: 设置鼠标滑向页码时页码边框的颜色。
text_hover_color: 设置鼠标滑向页码时页码的颜色。
background_hover_color: 设置鼠标滑向页码时页码背景的颜色。
images: 是否显示页码导航箭头(方向箭头)(true/false)
mouse: 设置为'press'时,当鼠标滑向导航箭头时,页码随之滚动;设置为'slide'时,鼠标单击一次导航箭头页码滚动一次。
onChange: 当单击页码时,回调函数.
实例应用:PHP+jQuery实现Ajax分页效果
首先准备index.php,该页面用来分页展示一个博客文章列表。
1、引用JS:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.paginate.js"></script> 
<script type="text/javascript"> 
$(function(){ 
  $("#demo").paginate({ 
    count    : <?php echo $page;?>, 
    start    : 1, 
    display   : 5, 
    border         : true, 
    border_color      : '#BEF8B8', 
    text_color       : '#79B5E3', 
    background_color    : '#E3F2E1',   
    border_hover_color   : '#68BA64', 
    text_hover_color    : '#2573AF', 
    background_hover_color : '#CAE6C6', 
    images         : false, 
    mouse          : 'press', 
    onChange        : function(page){ 
                  $("#pagetxt").load("article.php?id="+page); 
                 } 
  }); 
}); 
</script>

注意,关于插件的属性设置,上文已详细介绍,属性count通过PHP计算出总页数$page,该参数由article.php得出。还要说明的是属性onChange:当点击页码时,调用函数,该函数实现了异步提交页码参数给article.php来处理,article.php通过读取数据库里的表书籍,并把得到的文章列表结果而返回页面,这就是Ajax。当然我这里只是做简单的演示,如果需要更多异步效果,可以参照jQuery使用文档。
2、引用CSS:
jPaginate官方提供了导航条样式,你也可以自己写个非常酷的样式。

<link rel="stylesheet" type="text/css" href="style.css" />

3、index.php初始页面。
必须要显示一个初始的文章列表,代码如下

<div class="demo"> 
  <h4>Demo 3: Php+jQuery实现AJAX 分页效果</h4> 
  <div id="pagetxt"> 
    
  </div> 
  <div id="demo"></div> 
</div>

在ID为pagetxt的DIV内加入PHP代码:

$query=$db->select("article","id,title,pubdate","cata=1 order by id desc limit 0,5"); 
while($row=$db->fetch_array($query)){ 
   $pubdate=date("Y-m-d",$row[pubdate]); 
   echo "<p><span>$pubdate</span><a href='view-blog-".$row[id].".html' target='_blank'> 
".$row[title]."</a></p>";

4、article.php代码。

该代码用来获取index.php提交过来的页码,查询数据库,并将输出结果。代码如下:

include_once("common.php"); //连接数据库专用文件 
 
$id=$_GET['id']; //获取页码 
$result = $db->select("article", "id", "cata=1"); 
$total = $db->db_num_rows($result); //总记录数 
 
$pagesize=5; //每页显示数 
$page=ceil($total/$pagesize); //总页数 
if(isset($id)){ 
  $startPage=($id-1)*$pagesize; 
  $query=$db->select("article","id,title,pubdate","cata=1 order by id desc limit $startPage, 
$pagesize"); 
  while($row=$db->fetch_array($query)){ 
   $pubdate=date("Y-m-d",$row[pubdate]); 
   echo "<p><span>$pubdate</span><a href='view-blog-".$row[id].".html' target='_blank'> 
".$row[title]."</a></p>"; //输出文章列表 
  } 
}

以上介绍了PHP+jQuery实现Ajax分页效果中jPaginate插件的应用,希望对大家的学习有所帮助。

PHP 相关文章推荐
桌面中心(二)数据库写入
Oct 09 PHP
php中的时间显示
Jan 18 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
Oct 31 PHP
个人写的PHP验证码生成类分享
Aug 21 PHP
PHP操作文件的一些基本函数使用示例
Nov 18 PHP
php文件夹的创建与删除方法
Jan 24 PHP
PHP设计模式之装饰者模式代码实例
May 11 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
Jun 20 PHP
PHP中常用的数组操作方法笔记整理
May 16 PHP
php 中的closure用法详解
Jun 12 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
Aug 31 PHP
laravel多条件查询方法(and,or嵌套查询)
Oct 09 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
Oct 08 #PHP
常见的四种POST 提交数据方式(小总结)
Oct 08 #PHP
PHP抽奖算法程序代码分享
Oct 08 #PHP
php视频拍照上传头像功能实现代码分享
Oct 08 #PHP
php+ajax 实现输入读取数据库显示匹配信息
Oct 08 #PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
Oct 08 #PHP
php 问卷调查结果统计
Oct 08 #PHP
You might like
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
微信支付开发维权通知实例
2016/07/12 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
行政主管岗位职责
2013/11/18 职场文书
办公室副主任岗位职责
2013/11/25 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
培训班通知
2015/04/25 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL