前台代码

<!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. Ceph 基础知识和基础架构认识

    1  Ceph基础介绍 Ceph是一个可靠地.自动重均衡.自动恢复的分布式存储系统,根据场景划分可以将Ceph分为三大块,分别是对象存储.块设备存储和文件系统服务.在虚拟化领域里,比较常用到的是Cep ...

  2. “全栈2019”Java异常第八章：throw关键字详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...

  3. ava Maven项目之Nexus私服搭建和版本管理应用

    目录: Nexus介绍 环境.软件准备 Nexus服务搭建 Java Maven项目版本管理应用 FAQ 1.Nexus介绍 Nexus是一个强大的Maven仓库管理器,它极大地简化了自己内部仓库的维 ...

  4. elasticsearch 5.6.4自动创建索引与mapping映射关系 +Java语言

    由于业务上的需求 ,最近在研究elasticsearch的相关知识 ,在网上查略了大部分资料 ,基本上对elasticsearch的数据增删改都没有太大问题 ,这里就不做总结了  .但是,在网上始终没 ...

  5. Elasticsearch5.4 删除type

    首先要说明的是现在的Elasticsearch已经不支持删除一个type了,所以使用delete命令想要尝试删除一个type的时候会出现如下错误,如果存在一个名为edemo的index和tets的ty ...

  6. mycat引起的insert后马上select不到数据的故障分析

    由于有2个task表t_task和e_task,代码中Insert了t_task后马上select t_task然后把结果Insert到e_task,结果发现经常e_task会没有任何数据. 原因分析 ...

  7. scrapy实战2，使用内置的xpath，re和css提取值

      以伯乐在线文章为爬取目标blog.jobbole.com,发现在"最新文章"选项中可看到所有文章   一般来说,可以用scrapy中自带的xpath或者css来提取数据,定义在 ...

  8. JMeterPlugin性能监控

    GUI界面中的plugins manager中的jpgc-Standard set,其中共包含以下的文件: jpgc-dummy jpgc-fifo jpgc-graphs-basic jpgc-pe ...

  9. Myeclipse修改项目名称发布后web Context root名称无法修改

    选中项目,右键--->Properties--->在搜索框搜索:deployment as  然后点击显示出的搜索项.修改右侧视图的Web Context Root名称即可. 如图:

  10. Dota2APP--第二天

    一.今天的任务 1)自定义标签栏控制器 2)自定义导航栏控制器 3)在新特性界面播放音频 1.第一个任务:自定义标签栏控制器 原因:默认的TabbarViewController不能满足项目的需求. ...