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 相关文章推荐
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 Javascript
Angular短信模板校验代码
Sep 23 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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
js正确获取元素样式详解
2009/08/07 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
使用python进行拆分大文件的方法
2018/12/10 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
简单了解python中的与或非运算
2019/09/18 Python
django rest framework serializers序列化实例
2020/05/13 Python
基于python检查矩阵计算结果
2020/05/21 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
小学优秀辅导员事迹材料
2014/05/11 职场文书
2014年科普工作总结
2014/12/06 职场文书
诚实守信主题班会
2015/08/13 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸