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 相关文章推荐
onpropertypchange
Jul 01 Javascript
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
fmt:formatDate的输出格式详解
Jan 09 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
使用javascript插入样式
Mar 14 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
js调用网络摄像头的方法
Dec 05 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
截获网站title标签之家内容的例子
2006/10/09 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
JQUERY dialog的用法详细解析
2013/12/19 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
Vue开发中整合axios的文件整理
2017/04/29 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
Python中AND、OR的一个使用小技巧
2015/02/18 Python
详解Python中dict与set的使用
2015/08/10 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
python文件选择对话框的操作方法
2019/06/27 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
亿企通软件测试面试题
2012/04/10 面试题
优秀团员个人的自我评价
2013/10/02 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
团员个人总结
2015/02/26 职场文书
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技