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 相关文章推荐
js中window.open打开一个新的页面
Aug 10 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
webpack打包js的方法
Mar 12 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
转换layUI的数据表格中的日期格式方法
Sep 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
一个基于PDO的数据库操作类
2011/03/24 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
js获取指定的cookie的具体实现
2014/02/20 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
python 实现端口扫描工具
2020/12/18 Python
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
C语言笔试题
2014/09/04 面试题
傲盾软件面试题
2015/08/17 面试题
优秀的茶餐厅创业计划书
2014/01/03 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
辞职信的写法
2015/02/27 职场文书
团日活动总结格式
2015/05/11 职场文书
匿名信格式范文
2015/05/27 职场文书
班级班风口号大全
2015/12/25 职场文书
青年教师听课心得体会
2016/01/15 职场文书
员工升职自我评价
2019/03/26 职场文书
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript