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 Dialog 弹出层对话框插件
Aug 09 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
Nov 06 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 安全检测代码片段(分享)
2013/07/05 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
php向js函数传参的几种方法
2014/08/10 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
JS的数组迭代方法
2015/02/05 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
Python中logger日志模块详解
2020/08/04 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
史上最全面的Java面试题汇总!
2015/02/03 面试题
物流经理自我评价
2013/09/23 职场文书
网络信息管理员岗位职责
2014/01/05 职场文书
闪闪红星观后感
2015/06/08 职场文书