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>
        <script type="text/javascript" src="script/jquery.pagination.js"></script>
        <script type="text/javascript">
            $(function(){
                    //此demo通过Ajax加载分页元素
                    var initPagination = function(data) {

var feedback = "";

$.each(data.list, function(index, d) {
                        var str ="";
                        str+= "<dl class='result' style='display:none;'>";
                        str+="<dt><img src='http://www.jb51.net/headshotsByName/balijiang.png?l' alt='图片' width='70' height='70' /></dt>";
                        str+="<dd><a href='#' title='VYyu'>VYyu</a></dd>";
                        str+="<dd class='gray'>2009-09-26 </dd>";
                        str+="<dd>"+d+"</dd>";
                        str+="</dl>";
                        feedback += str;
                        });
                    $("#feedback").empty().append(feedback); //装载对应分页的内容

//alert(datac.list.length);
                    //var num_entries = $(".result").length;
                    var num_entries = data.list.length;
                    // 创建分页
                    $("#page").pagination(num_entries, {
                        num_edge_entries: 1, //边缘页数
                        num_display_entries: 5, //主体页数
                        callback: pageselectCallback,
                        items_per_page: 3, //每页显示1项
                        prev_text: "前一页",
                        next_text: "后一页"
                    });

pageselectCallback(0);
                    }

function pageselectCallback(page_index, jq){

var resultList = $(".result");
    //var feedback = "";
    //alert(resultList.length);
    $(".result").each( function(index, data) {
            //alert(index);
            $(this).css('display','none');
            if(Math.floor(index/3)  == page_index){
            $(this).css('display','block');
            }
            });

return false;
}
//ajax加载
$.getJSON("testPage",null, function(data){initPagination(data)});
});
</script>

</head>

<body>

<div id="feedback" class="feedback"> </div>

<div id="page" class="pager"></div>
</body>

</html>

赞 (0)

相关推荐

  • jQuery插件jPaginate实现无刷新分页

    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 ($

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

    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+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)

    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实现的无刷新分页代码

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

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

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

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

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

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

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

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

  • 基于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+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无刷新分页完整实例代码

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

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

随机推荐