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折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
jquery实现抽奖功能
Oct 22 jQuery
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 Javascript
vue判断按钮是否可以点击
Apr 09 Vue.js
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
php实现文件下载更能介绍
2012/11/23 PHP
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
python中sets模块的用法实例
2014/09/30 Python
python实现的希尔排序算法实例
2015/07/01 Python
查看Django和flask版本的方法
2018/05/14 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
Python求离散序列导数的示例
2019/07/10 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
物业管理大学生个人的自我评价
2013/10/10 职场文书
个性大学生自我评价
2013/12/04 职场文书
管理学专业个人求职信范文
2013/12/13 职场文书
运动会跳远加油稿
2014/02/20 职场文书
理想演讲稿范文
2014/05/21 职场文书
银行金融服务方案
2014/06/11 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
2015年公司新年寄语
2014/12/08 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
教师师德工作总结2015
2015/07/22 职场文书
护理培训心得体会
2016/01/22 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书