前台代码

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <link href="css/table.css" rel="stylesheet" />

    <script src="js/jquery-3.2.1.js"></script>

    <script>

        $(function () {

            //网页启动加载数据

            Init();

        });

        function Init(postData) {

            //网页启动时,获取指定的数据

            $.getJSON("ProcessInfo.ashx", postData, function (data) {

                //先将原有内容清空

                $("table tbody").empty();

                //拿到当前列表

                var list = data.list;

                //循环读取列表中的数据

                for (var i = 0; i < list.length; i++) {

                    str = "<tr>";

                    //将数据填充

                    str += "<td>" + list[i].CustomerID + "</td>";

                    str += "<td>" + list[i].CustomerCompany + "</td>";

                    str += "<td>" + list[i].CustomerName + "</td>";

                    str += "<td>" + list[i].CustomerContact + "</td>";

                    str += "<td>" + list[i].CustomerAddress + "</td>";

                    str += "<td>" + list[i].CustomerCity + "</td>";

                    str += "<td>" + list[i].CustomerArea + "</td>";

                    str += "<td>" + list[i].CustomerCode + "</td>";

                    str += "<td>" + list[i].CustomerCountry + "</td>";

                    str += "<td>" + list[i].CustomerTelephone + "</td>";

                    str += "<td>" + list[i].CustomerFax + "</td>";

                    str += "</tr>";

                    //将数据追加到表格中

                    $("table tbody").append(str);

                }

                //将分页标签放到div里去

                $("#nav").append(data.nav);

                //给分页标签绑定点击事件

                $("#nav a").click(function () {

                    //清空原有分页标签

                    $("#nav").empty();

                    //获取分布标签a链接的href属性值

                    var href = $(this).attr("href");

                    //获取分布标签a链接?后面的数据,得到pageIndex和pageSize的键值对集合

                    var queryString = href.substr(href.lastIndexOf("?") + 1);

                    //将数据传递到方法中继续加载

                    Init(queryString);

                    return false;

                })

            });

        }

    </script>

    <style>

        #nav{

            margin-top:20px;

        }

        #nav a,#nav span{

            border:1px solid #ccc;

            padding:10px;

        }

    </style>

</head>

<body>

    <div class="content">

        <!-- 数据显示区域  开始-->

        <table>

            <thead>

                <tr>

                    <th>客户ID</th>

                    <th>公司名称</th>

                    <th>联系人姓名</th>

                    <th>联系人职务</th>

                    <th>地址</th>

                    <th>城市</th>

                    <th>地区</th>

                    <th>邮政编码</th>

                    <th>国家</th>

                    <th>电话</th>

                    <th>传真</th>

                </tr>

            </thead>

            <tbody>

            </tbody>

        </table>

        <!-- 数据显示区域  结束-->

        <!-- 分页标签显示  开始-->

        <div id="nav"></div>

        <!-- 分页标签显示  结束-->

    </div>

</body>

</html>

后台代码,请求ashx一般处理程序

 public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            //获取前台传递的当前页码

            int pageIndex = Convert.ToInt32(context.Request["pageIndex"]??"");

            //获取前台传递的数量

            int pageSize = Convert.ToInt32(context.Request["pageSize"] ?? "");

            //实例化bll层业务对象

            BLL.CustormerBll bll = new BLL.CustormerBll();

            //得到当前应该显示的数据量

            List<Model.CustomerMl> list = bll.GetPage(pageSize, pageIndex);

            //得到当前整个表的条数

            int count = bll.GetCount();

            //调用方法获取分页标签

           string nav= Common.PageForRao.Page(pageIndex, count, pageSize, "");

            //将数据和分页标签放在匿名类中

            var objSon = new { list = list, nav = nav };

            //实例化一个序列化对象

            System.Web.Script.Serialization.JavaScriptSerializer ser = new System.Web.Script.Serialization.JavaScriptSerializer();

            //将装载了前台所需要的数据进行序列化

            string data = ser.Serialize(objSon);

            //将序列化后的数据传递给前台

            context.Response.Write(data);

        }

运行后效果

点击下一页时,以及1,2,3,4,5时的效果如下图

当点击到第6页,以及7,8,9时的效果图

当点 击到第10页(最末页时)

对自写的Asp.Net分页控件的应用方式(异步无刷新分页)的更多相关文章

  1. ASP.NET MVC 使用Uploadify实现多文件异步无刷新上传

    软件技术开发,合作请联系QQ:858-048-581 这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解 ...

  2. knockout Ajax异步无刷新分页 Demo +mvc+bootstrap

    最近工作中web客户端需要用到knockout,在此记录下一些Demo,以后用到的时候查找起来方便.也希望给新入门的knockout使用者一点经验.knockout官方文档.这儿是一个使用knocko ...

  3. ajax分页2：jquery.pagination +JSON 动态无刷新分页

    静态页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  4. SUI分页组件和avalon搞定ajax无刷新分页

    <div ms-controller="main"> <h2 class="pagination-centered">{{ title ...

  5. 自己动手用Javascript写一个无刷新分页控件

    .NET技术交流群:337901356 ,欢迎您的加入! 对 于一个用户体验好的网站来说,无刷新技术是很重要的,无刷新,顾名思义,就是局部刷新数据,有用过Asp.net Web Form技术开发网页的 ...

  6. 基于存储过程的MVC开源分页控件--LYB.NET.SPPager

    摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件MVCPager(http://www.webdiyer.com/)算 ...

  7. 基于存储过程的MVC开源分页控件

    基于存储过程的MVC开源分页控件--LYB.NET.SPPager 摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件M ...

  8. 在DevExpress程序中使用Winform分页控件直接录入数据并保存

    一般情况下,我们都倾向于使用一个组织比较好的独立界面来录入或者展示相关的数据,这样处理比较规范,也方便显示比较复杂的数据.不过在一些情况下,我们也可能需要直接在GridView表格上直接录入或者修改数 ...

  9. WPF 实现 DataGrid/ListView 分页控件

    在WPF中,通常会选用DataGrid/ListView进行数据展示,如果数据量不多,可以直接一个页面显示出来.如果数据量很大,2000条数据,一次性显示在一个页面中,不仅消耗资源,而且用户体验也很糟 ...

随机推荐

  1. Java50道经典习题-程序6 求最大公约数及最小公倍数

    题目:输入两个正整数m和n,求其最大公约数和最小公倍数.分析:用辗转相除法求最大公约数    两个数的最大公约数:设两个数分别为n和m,(n>=m);用定义一个变量i,使用for循环,将i的取值 ...

  2. css3旋转动画

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. [bzoj4444] 国旗计划 双指针+倍增

    Description A国正在开展一项伟大的计划--国旗计划.这项计划的内容是边防战士手举国旗环绕边境线奔袭一圈.这项计划需要多名边防战士以接力的形式共同完成,为此,国土安全局已经挑选了N名优秀的边 ...

  4. YC全球总裁：我招揽陆奇好多年，如今终于如愿了！

    简评:YC 老大多年来一直在努力招揽陆奇,终于如愿了. YC 总裁 Sam Altman 在 8 月 14 日,发布了关于陆奇以及 YC 中国的公告,全文如下: 我非常荣幸地宣布,陆奇加入 YC 并且 ...

  5. 3.1 High Availability

    摘要: 出处:黑洞中的奇点 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但请保留该 ...

  6. 网络请求及各类错误代码含义总结(包含AFN错误码大全)

    碰见一个很奇葩的问题, 某些手机在设置了不知什么后, 某些 APP 死活 HTTPS 请求失败, 例如以 UMeng 统计HTTP 请求失败为例, Log如下: UMLOG: (Error   App ...

  7. i2c_smbs 函数

    i2c_smbus系列函数有: s32 i2c_smbus_read_byte(const struct i2c_client *client); s32 i2c_smbus_write_byte(c ...

  8. JS使用Crypto实现AES/ECS/zero-padding加密

    首先说一句,no-padding和zero-padding是一样的.他们指的是不够16位的情况补0至16位. 天知道网上为什么会出现两种叫法. 另附两个有用的网址 http://tool.chacuo ...

  9. （JAVA作业）练习：创建一个类名为Fruit;包含实例变量：水果名称，颜色，价格，上市月份，有无种子 10个实例：苹果，香蕉，芭乐，柚子，李子，杨桃，猕猴桃，哈密瓜，葡萄，榴莲； 实现功能：提示用户输入水果品种编号，输出该水果的全部信息。

    class Lei { String name; String color; int price; int date; int num; String zz; void assemble(){ Sys ...

  10. Focal Loss 的前向与后向公式推导

    把Focal Loss的前向和后向进行数学化描述.本文的公式可能数学公式比较多.本文尽量采用分解的方式一步一步的推倒.达到能易懂的目的. Focal Loss 前向计算 其中 是输入的数据 是输入的标 ...