jQuery插件jPaginate实现无刷新分页


Posted in Javascript onMay 04, 2015

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

jQuery插件jPaginate实现无刷新分页

PHP读取第一页数据:

<div id="pagetxt"> 
  <?php 
  $query = mysql_query("select id,title,addtime from article order by id desc limit 0, 6"); 
  while ($row = mysql_fetch_array($query)) { 
    $pubdate = date("Y-m-d", $row['addtime']); 
    echo '<p><span>' . $pubdate . '</span><a href="https://3water.com/js/' . $row['id'] . '.html" target="_blank">' . $row['title'] . '</a></p>'; 
  } 
  mysql_close(); 
  ?> 
</div>

jQuery

$("#demo3").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', //设置为'press'时,当鼠标滑向导航箭头时,页码随之滚动;设置为'slide'时,鼠标单击一次导航箭头页码滚动一次。 
  onChange: function(page) { //当单击页码时,回调函数. 
  $("#pagetxt").load("article.php?p=" + page); 
  } 
});
article.php
$p = isset($_GET['p']) ? intval($_GET['p']) : ""; 
 
$result = mysql_query("select id from article"); 
$total = mysql_num_rows($result); 
 
$pagesize = 6; //每页显示数 
$page = ceil($total / $pagesize); //总页数 
if ($p) { 
  $startPage = ($p - 1) * $pagesize; 
  $query = mysql_query("select id,title,addtime from article order by id desc limit $startPage, $pagesize"); 
  while ($row = mysql_fetch_array($query)) { 
    $pubdate = date("Y-m-d", $row['addtime']); 
    echo '<p><span>' . $pubdate . '</span><a href="https://3water.com/js/' . $row['id'] . '.html" target="_blank">' . $row['title'] . '</a></p>'; 
  } 
}

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
jquery中post方法用法实例
Oct 21 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 Javascript
javascript白色简洁计算器
May 04 #Javascript
jQuery简单实现日历的方法
May 04 #Javascript
jquery插件jSignature实现手动签名
May 04 #Javascript
js简单实现竖向tab选项卡的方法
May 04 #Javascript
PHP+mysql+Highcharts生成饼状图
May 04 #Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 #Javascript
js检测判断日期大于多少天的方法
May 04 #Javascript
You might like
几种显示数据的方法的比较
2006/10/09 PHP
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
js function定义函数使用心得
2010/04/15 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
vue过滤器用法实例分析
2019/03/15 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
Python深入学习之特殊方法与多范式
2014/08/31 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
python实现学生成绩测评系统
2020/06/22 Python
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
财务主管的岗位职责
2013/12/30 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
实习生岗位职责
2014/04/12 职场文书
五四青年节演讲稿
2014/05/26 职场文书
服务宗旨标语
2014/07/01 职场文书
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP