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实现unicode和字符的互相转换
Jul 18 Javascript
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
jQuery hover 延时器实现代码
Mar 12 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
JavaScript DOM基础
Apr 13 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 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下清空字符串中的HTML标签的代码
2010/09/06 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
农历与西历对照
2006/09/06 Javascript
js控制div及网页相关属性的代码
2009/12/19 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
Python验证企业工商注册码
2015/10/25 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
python打印异常信息的两种实现方式
2019/12/24 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
大学生大二自我鉴定
2013/10/28 职场文书
社区党务公开实施方案
2014/03/18 职场文书
相亲大会策划方案
2014/06/05 职场文书
设计大赛策划方案
2014/06/13 职场文书
文明城市标语
2014/06/16 职场文书
英语教研活动总结
2014/07/02 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书