前台代码

<!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. docker 存储驱动之 overlay2

    overlay2 简介 OverlayFS是一种和AUFS很类似的文件系统,与AUFS相比,OverlayFS有以下特性:  1) 更简单地设计 2) 从3.18开始,就进入了Linux内核主线 3) ...

  2. Problem G: 沉迷字符的WJJ (LCS)

    Contest - 河南省多校连萌(四) Problem G: 沉迷字符的WJJ Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 6  Solved: 5 ...

  3. bzoj1047理想的正方形

    题目链接 纪念又双叒叕的一道暴力碾标算的题 我们考虑纯暴力 #include<iostream> #include<cstdio> #include<algorithm& ...

  4. Vulnhub Acid

    1.信息收集 1.1.netdiscover netdiscover -i eth0 -r 192.168.118.0/24 1.2. Nmap nmap -sP -T4 192.168.118.0/ ...

  5. C++中指针运算

    1,指针可以和数字运算,指针+-整数,如, int num[] = {1,2,3,4,5,6,7,8}; int *p = num; p++; p--; p = p + 3; p = p -3; 数字 ...

  6. eclipse的classpath(build path)和classpaht几种设置的方式

    1,默认eclipse有自己的classpath的路径并不是环境变量中配置的classpah. 2,eclipse的classpath每个项目不同,一般是在工作区的当前项目的class下. 2.1,可 ...

  7. sql注入原理详解（一）

    我们围绕以下几个方面来看这个问题: 1.什么是sql注入? 2.为什么要sql注入? 3.怎样sql注入? 1.什么是sql注入? 所谓SQL注入,就是通过把SQL命令插入到Web表单递交或输入域名或 ...

  8. 2016级算法期末上机-C.简单·Bamboo's Fight with DDLs III

    简单·Bamboo's Fight with DDLs III 分析 一句话:贪心,简单哈夫曼应用,要求的其实是所有结点的值与权值的乘积之和,也就是带权路径长. 可以理解为非叶子节点的权值的和,这里的 ...

  9. Flowportal-BPM——环境配置

    环境配置: 一.控制面板→程序和功能→打开或不关闭Window功能→选择选项 二.控制面板→管理工具→Internet信息服务(IIS)管理器→左侧第一个→ISAPI和CGI限制→全部选为[允许] 三 ...

  10. CF1083（Round #526 Div. 1） 简要题解

    题目链接 https://codeforces.com/contest/1083 简要题目翻译 题解 A. The Fair Nut and the Best Path 可以忽略掉"任意时刻 ...