jQuery插件jPaginate实现无刷新分页

jPaginate是基于jQuery的动感滚动分页插件,它的表现形式是像分页的按钮一样,非常有意思的是这些按钮却可以滚动,可以通过单击或鼠标滑向点两侧的小箭头来控制按钮的前后滚动。

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="http://www.jb51.net/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="http://www.jb51.net/js/' . $row['id'] . '.html" target="_blank">' . $row['title'] . '</a></p>';
  }
}

以上所述就是本文的全部内容了,希望大家能够喜欢。

(0)

相关推荐

  • 基于jquery的无刷新分页技术

    复制代码 代码如下: <script src="script/jquery-1.6.1.min.js" type="text/javascript"></script> <script type="text/javascript"> var index = 0; $(document).ready(function () { $.post("Default5.aspx", { name: i

  • jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)

    理由:jquery简单,兼容性好且容易封装.废话不多说,马上开始我们的Jquery插件编写吧.应该有很多人写过类似的插件,我也是有些模仿flexGrid的形式. 需求:GridView显示数据,无刷新分页,无刷新排序,无刷新过滤(搜索数据),基于ASP.NET(我们这里有ashx一般处理文件来实现). 使用到技术:asp.net2.0, jquery,css 首先写的是jquery插件方面,使用的核心函数还是jquery的ajax函数,方便快捷. 复制代码 代码如下: $.ajax({ type

  • jquery插件pagination实现无刷新ajax分页

    1.前台使用ajax无刷新分页,主要需要生成分页的工具条,这里使用的是jquery.pagination.js 插件参数可以参考----张龙豪-jquery.pagination.js分页 下面贴出代码 /** * This jQuery plugin displays pagination links inside the selected elements. * * @author Gabriel Birke (birke *at* d-scribe *dot* de) * @version

  • Jquery+JSon 无刷新分页实现代码

    控件类代码: 复制代码 代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Reflection; using System.IO; [as

  • jQuery 无刷新分页实例代码

    复制代码 代码如下: <html> <head>     <script type="text/javascript" src="script/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="script/jquery-1.7.1.js"></script>       

  • php jquery 实现新闻标签分类与无刷新分页

    现在jquery的应用越来越广泛了,在很多网站的新闻板块都实现了 标签分类 + 无刷新分页 的效果. 也自己尝试写了一个,效果图如下(样式可以按用户需求自己去整): 接下来详细介绍实现过程: 我一向是见招拆招的解决思路,这里需要运用到3个东西--标签页效果插件和分页插件,jquery的getJson请求. 因此我使用了jquery-ui插件,jquery-page插件,现提供下载地址: jquery_all.rar 里面包含了3个JS脚本文件和2个样式表:jquery-1.3.2.min.jsj

  • JQuery与JSon实现的无刷新分页代码

    如图   而无刷新分页可以解决这个问题,上面播放着视频,下面我点下一页看着评论,现在大部分的网站都是无刷新分页. 源码如下(我是采用一页显示10条记录): 需要四个文件 一个实体类文件 CategoryInfoModel.cs 一个SqlHelper SQLHelper.cs 一个AJAX服务端处理程序 PagedService.ashx 一个客户端调用页面 WSXFY.htm CategoryInfoModel.cs和SQLHelper.cs我就不写了,都知道是什么文件 PagedServic

  • jquery pagination插件实现无刷新分页代码

    先把要用到的文件依次进入进来: 复制代码 代码如下: <script src="common/jquery.js" type="text/javascript"></script> <script src="common/jquery.pagination.js" type="text/javascript"></script> <link href="commo

  • jQuery无刷新分页完整实例代码

    本文实例讲述了jQuery无刷新分页实现方法.分享给大家供大家参考,具体如下: 这款jQuery分页示例,是分页经典形式,兼容性也做的好,网页上的分页代码,分享给大家. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-wsx-page-style-demo/ 具体代码如下: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" conte

  • JQuery+Ajax无刷新分页的实例代码

    先看效果图: 实现原理很简单,使用了jquery.pagination这个插件,每当点击页码时异步去服务器去取该页的数据,简单介绍如下: 一.数据库表结构:很简单  就四个字段 分别是News_id  News_title  News_time  News_readtimes 二.前台页面代码: 复制代码 代码如下: <head runat="server">    <title>JQuery无刷新分页</title>    <link hre

随机推荐