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 相关文章推荐
介绍几个array库的新函数 php
Dec 29 PHP
深入解析php模板技术原理【一】
Jan 10 PHP
PHP CKEditor 上传图片实现代码
Nov 06 PHP
php动态实现表格跨行跨列实现代码
Nov 06 PHP
Memcached常用命令以及使用说明详解
Jun 27 PHP
php读取mysql中文数据出现乱码的解决方法
Aug 16 PHP
PHP使用正则表达式清除超链接文本
Nov 12 PHP
5种PHP创建数组的实例代码分享
Jan 17 PHP
php+mysqli数据库连接的两种方式
Jan 28 PHP
Yii2.0高级框架数据库增删改查的一些操作
Nov 16 PHP
laravel 使用事件系统统计浏览量的实现
Oct 16 PHP
PHP 实现链式操作
Mar 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
新闻分类录入、显示系统
2006/10/09 PHP
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
PDO实现学生管理系统
2020/03/21 PHP
php array_map()函数实例用法
2021/03/03 PHP
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
python中关于日期时间处理的问答集锦
2013/03/08 Python
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
python常见的格式化输出小结
2016/12/15 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
如何在django中添加日志功能
2020/02/06 Python
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
配件采购员岗位职责
2013/12/03 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
餐馆开业致辞
2015/08/01 职场文书
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS