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 未结束的字符串常量错误解决方法
Jun 13 Javascript
JQuery1.6 使用方法三
Nov 23 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
理解javascript async的用法
Aug 22 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
swiper自定义分页器的样式
Sep 14 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按行读取文件时删除换行符的3种方法
2014/05/04 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
原生js实现分页效果
2020/09/23 Javascript
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
wxPython实现文本框基础组件
2019/11/18 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
酒店总经理欢迎词
2014/01/08 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP