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


Posted in Javascript onFebruary 08, 2014

先看效果图:
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;
            }
        }
    }
Javascript 相关文章推荐
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
JS+JSP checkBox 全选具体实现
Jan 02 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
基于Vue的延迟加载插件vue-view-lazy
May 21 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 #Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 #Javascript
jquery ajax 局部刷新小案例
Feb 08 #Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 #Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 #Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 #Javascript
javascript运行机制之this详细介绍
Feb 07 #Javascript
You might like
使用PHP静态变量当缓存的方法
2013/11/13 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
javascript深入理解js闭包
2010/07/03 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
jQuery设计思想
2017/03/07 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
python局部赋值的规则
2013/03/07 Python
python实现读取命令行参数的方法
2015/05/22 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
python如何删除文件中重复的字段
2019/07/16 Python
简单了解python协程的相关知识
2019/08/31 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
Ibatis如何调用存储过程
2015/05/15 面试题
大三自我鉴定范文
2013/10/05 职场文书
幼儿园元旦活动感言
2014/03/02 职场文书
销售人员工作自我评价
2014/09/21 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS