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 相关文章推荐
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
JavaScript中出现乱码的处理心得
Dec 24 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
Bootstrap响应式表格详解
May 23 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 Javascript
原生JavaScript实现进度条
Feb 19 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
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
走出JavaScript初学困境—js初学
2008/12/29 Javascript
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
layui导航栏实现代码
2017/05/19 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
深入了解Python数据类型之列表
2016/06/24 Python
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
会计专业毕业生求职信分享
2014/01/03 职场文书
结婚周年感言
2014/02/24 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
大学生入党群众意见书
2015/06/02 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
Python使用openpyxl模块处理Excel文件
2022/06/05 Python