脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → JQuery Ajax 分页

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

 更新时间：2014年02月08日 09:19:51   作者：  
本篇文章主要是对JQuery+Ajax无刷新分页的实例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
先看效果图：

实现原理很简单，使用了jquery.pagination这个插件，每当点击页码时异步去服务器去取该页的数据，简单介绍如下：
一、数据库表结构：很简单  就四个字段 分别是News_id  News_title  News_time  News_readtimes

二、前台页面代码：

复制代码 代码如下:

<head runat="server">
    <title>JQuery无刷新分页</title>
    <link href="Styles/common.css" rel="stylesheet" type="text/css" />
    <link href="Styles/paging.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.pagination.js" type="text/javascript"></script>
    <script type="text/javascript">   
    var pageIndex = 0;
    var pageSize = 3;

    $(function() {      
        InitTable(0);             

        $("#Pagination").pagination(<%=pageCount %>, {
            callback: PageCallback,
            prev_text: '上一页',
            next_text: '下一页',
            items_per_page: pageSize,
            num_display_entries: 6,//连续分页主体部分分页条目数
            current_page: pageIndex,//当前页索引
            num_edge_entries: 2//两侧首尾分页条目数
        });

        //翻页调用
        function PageCallback(index, jq) {          
            InitTable(index);
        }

        //请求数据
        function InitTable(pageIndex) {                               
            $.ajax({
                type: "POST",
                dataType: "text",
                url: 'Ajax/PagerHandler.ashx',
                data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize,
                success: function(data) {                                
                    $("#Result tr:gt(0)").remove();//移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）
                    $("#Result").append(data);//将返回的数据追加到表格
                }
            });           
        }
    });
    </script>
</head>


复制代码 代码如下:

<form id="form1" runat="server">
    <center>
        <table id="Result" border="1" cellpadding="5" style="border-collapse: collapse; margin:20px;
            border: solid 1px #85A8BE;width:60%">
            <tr>
                <th style="width: 10%">
                    ID
                </th>
                <th style="width: 60%">
                    标题
                </th>
                <th style="width: 20%">
                    更新时间
                </th>
                <th style="width: 10%">
                    点击量
                </th>
            </tr>
        </table>
        <div id="Pagination" class="paging">
        </div>
    </center>
    </form>

三、页面后台文件

这里主要是获取记录总数：

复制代码 代码如下:

public string pageCount = string.Empty;//总条目数

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                pageCount = new News().GetNewsCount();
            }
        }


四、最主要的是ajax处理程序：PagerHandler.ashx
复制代码 代码如下:

 public class PagerHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string str = string.Empty;
            int pageIndex = Convert.ToInt32(context.Request["pageIndex"]);
            int size = Convert.ToInt32(context.Request["pageSize"]);
            if (pageIndex == 0)
            {
                pageIndex = 1;
            }
            int count = 0;

            News n = new News();
            List<News> list = n.GetNewsList(pageIndex, size, ref count);
            StringBuilder sb = new StringBuilder();
            foreach (News p in list)
            {
                sb.Append("<tr><td>");
                sb.Append(p.News_id);
                sb.Append("</td><td>");
                sb.Append("<a href='#'>"+p.News_title+"</a>");
                sb.Append("</td><td>");
                sb.Append(p.News_time);
                sb.Append("</td><td>");
                sb.Append(p.News_readtimes);
                sb.Append("</td></tr>");
            }
            str = sb.ToString();
            context.Response.Write(str);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

您可能感兴趣的文章:

相关文章

  • 基于jQuery实现弹出可关闭遮罩提示框实例代码

    基于jQuery实现弹出可关闭遮罩提示框实例代码

    这篇文章主要介绍了基于jQuery实现弹出可关闭遮罩提示框实例代码的相关资料
    2016-07-07
  • jQuery对象的length属性用法实例

    jQuery对象的length属性用法实例

    这篇文章主要介绍了jQuery对象的length属性用法,实例分析了length属性获取集合中对象数目的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • Jquery.TreeView结合ASP.Net和数据库生成菜单导航条

    Jquery.TreeView结合ASP.Net和数据库生成菜单导航条

    在网上浏览了许多关于利用Jquery.TreeView插件生成树的例子！但是大多数都没有结合数据库来生成树，很难运用到实际项目中！
    2010-08-08
  • JQuery选择器用法详解

    JQuery选择器用法详解

    本文详细讲解了JQuery选择器的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-04-04
  • iframe异步加载实现点击左边菜单加载右边内容实例讲解

    iframe异步加载实现点击左边菜单加载右边内容实例讲解

    iframe异步加载想必很多朋友对你都不会陌生,接下来将实现这样一个功能左边菜单不能刷新的情况下，异步加载右边的内容页面，感兴趣的你可以参考下本文或许对你有所帮助
    2013-03-03
  • jQuery实现图片预加载效果

    jQuery实现图片预加载效果

    这篇文章分享一款基于jQuery图片预加载ydxLazyLoad.js代码。这是一款基于ydxLazyLoad.js插件实现的图片延迟加载特效，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • jQuery+ajax实现动态添加表格tr td功能示例

    jQuery+ajax实现动态添加表格tr td功能示例

    这篇文章主要介绍了jQuery+ajax实现动态添加表格tr td功能,结合实例形式分析了jQuery基于ajax动态创建页面table元素相关操作技巧,需要的朋友可以参考下
    2018-04-04
  • 基于jquery实现页面滚动时顶部导航显示隐藏

    基于jquery实现页面滚动时顶部导航显示隐藏

    这篇文章主要介绍了基于jquery实现页面滚动时顶部导航显示隐藏效果，当页面向下滚动的时候，导航菜单动态隐藏，页面滚动到顶部时，导航菜单动态显示，淘宝也采用过此效果，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • jQuery Validation Plugin验证插件手动验证

    jQuery Validation Plugin验证插件手动验证

    jquery.validate是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法，并且对国际化也有很好的支持，接下来通过本文给大家介绍jQuery Validation Plugin验证插件手动验证
    2016-01-01
  • jquery插件推荐浏览器嗅探userAgent

    jquery插件推荐浏览器嗅探userAgent

    这里给大家推荐一款浏览器嗅探的jQuery插件useragent，兼容各大浏览器，在做项目的时候经常要用到，非常的实用
    2014-11-11

最新评论