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 判断指定字符串是否为有效数字
May 11 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
jquery图片放大镜功能的实例代码
Mar 26 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
jquery datatable服务端分页
Aug 31 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
在小程序开发中使用npm的方法
Oct 17 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
微信小程序时间戳转日期的详解
Apr 30 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 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
一些常用的Javascript函数
2006/12/22 Javascript
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
给Function做的OOP扩展
2009/05/07 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
js返回顶部实例分享
2016/12/21 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python的迭代器和生成器使用实例
2015/01/14 Python
python实现内存监控系统
2021/03/07 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
python如何使用腾讯云发送短信
2020/09/17 Python
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
《纸船和风筝》教学反思
2014/02/15 职场文书
护士长竞聘书
2014/03/31 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书