关于 异步无刷新分页的问题

今天做了  异步无刷新分页 ,之前自己的想法是 异步加载每一页的内容,传入pageSize(页面多大显示条数)和pageIndex(页码),然后查询出数据,放在dataset中,在利用json常用类库,把dataset转化为json对象,传回页面,同是把写好的分页代码也传回页面,当实施的时候遇到了困难,c#一般处理程序无法同时传两个参数到页面。

后来发现了一种方法, System.Web.Script.Serialization.JavaScriptSerializer,序列化,引用了--命名空间:   System.Web.Script.Serialization
程序集:
 System.Web.Extensions(System.Web.Extensions.dll 中),把对象序列化,然后用匿名类型赋值,如下:

string nav=  CommonHelper.PageNav.ShowPageNavigate(pageSize, pageIndex, total);   //分页代码返回的分页html字符串

DataSet ds= Dal.DbHelperSQL.Query(sql);
           string jsstr = CommonHelper.ConvertJson.ToJson(ds);   //借用ConvertJson类,把dataset转化为json

System.Web.Script.Serialization.JavaScriptSerializer scriptSerializer =new System.Web.Script.Serialization.JavaScriptSerializer();
           var jsonStr = scriptSerializer.Serialize(new {json =jsstr,NavHtml=nav});     //把两个参数放入jsonstr中

context.Response.Write(jsonStr);  //传回页面

//返回的jsonStr ,NavHtml部分被删除,由此可以看出,“json”后面的是字符串,所以在前台data.json.ds[1].cou_id的时候,无法显示,所以要把json字符串转化成json对像

{
    "json": "{\"ds\":[{\"select_id\":1,\"cou_id\":6,\"cou_name\":\"html基础\",\"stu_id\":2,\"stu_name\":\"陆雪康\",\"stu_sex\":\"男\",\"cla_id\":2,\"cla_name\":\"软件3132\"},{\"select_id\":2,\"cou_id\":5,\"cou_name\":\"asp.net基础\",\"stu_id\":2,\"stu_name\":\"陆雪康\",\"stu_sex\":\"男\",\"cla_id\":2,\"cla_name\":\"软件3132\"},{\"select_id\":3,\"cou_id\":5,\"cou_name\":\"asp.net基础\",\"stu_id\":1,\"stu_name\":\"陈然\",\"stu_sex\":\"男\",\"cla_id\":2,\"cla_name\":\"软件3132\"},{\"select_id\":4,\"cou_id\":2,\"cou_name\":\"毛概\",\"stu_id\":2,\"stu_name\":\"陆雪康\",\"stu_sex\":\"男\",\"cla_id\":2,\"cla_name\":\"软件3132\"},{\"select_id\":5,\"cou_id\":4,\"cou_name\":\"java基础\",\"stu_id\":4,\"stu_name\":\"孔辉\",\"stu_sex\":\"男\",\"cla_id\":1,\"cla_name\":\"软件3131\"},{\"select_id\":6,\"cou_id\":3,\"cou_name\":\"网络安全\",\"stu_id\":5,\"stu_name\":\"王翔\",\"stu_sex\":\"男\",\"cla_id\":1,\"cla_name\":\"软件3131\"},{\"select_id\":7,\"cou_id\":4,\"cou_name\":\"java基础\",\"stu_id\":6,\"stu_name\":\"卢巧巧\",\"stu_sex\":\"女\",\"cla_id\":1,\"cla_name\":\"软件3131\"},{\"select_id\":8,\"cou_id\":1,\"cou_name\":\"黑客攻防\",\"stu_id\":6,\"stu_name\":\"卢巧巧\",\"stu_sex\":\"女\",\"cla_id\":1,\"cla_name\":\"软件3131\"},{\"select_id\":9,\"cou_id\":2,\"cou_name\":\"毛概\",\"stu_id\":6,\"stu_name\":\"卢巧巧\",\"stu_sex\":\"女\",\"cla_id\":1,\"cla_name\":\"软件3131\"},{\"select_id\":10,\"cou_id\":3,\"cou_name\":\"网络安全\",\"stu_id\":7,\"stu_name\":\"张逸蕾\",\"stu_sex\":\"女\",\"cla_id\":1,\"cla_name\":\"软件3131\"}]}"
}

前台代码:

function InitInfo(strPostData) {
            $.getJSON("AjaxPageNav.ashx", strPostData, function (data) {
                $(".tbody").html("");
               //由于后台先用了ConvertJson类,把dataset转化为json字符串,所以在data.json取值的时候,取到的是json字符串,所以需要用JSON.parse(data.json);转化  //为    json对象
                var js = JSON.parse(data.json);

var strTr = "";
                for (var i = 0; i < js.ds.length; i++) {
                    strTr += "<tr>"
                    strTr += "<td>" + js.ds[i].cou_id + "</td>";
                    strTr += "<td>" + js.ds[i].cou_name + "</td>";
                    strTr += "<td>" + js.ds[i].stu_id + "</td>";
                    strTr += "<td>" + js.ds[i].stu_name + "</td>";
                    strTr += "<td>" + js.ds[i].stu_sex + "</td>";
                    strTr += "<td>" + js.ds[i].cla_id + "</td>";
                    strTr += "<td>" + js.ds[i].cla_name + "</td>";
                    strTr += "</tr>";
                }
                
                $(".tbody").html(strTr);

//data.NavHtml为取值,序列化把html字符串转化成了

{"json":"dataset转化过得字符串",

"NavHtml":"html的字符串"

}
                $(".paginator").html(data.NavHtml);

//点击分页导航触发的事件,
                $(".cpb").click(function () {
                    var href = $(this).attr("href");
                    var strPostData = href.substr(href.lastIndexOf(‘?‘) + 1);

//调用initInfo()方法,重新加载需要跳转到的页面的数据,strPostData:pageSize=**&pageIndex=**
                    // alert(strPostData);
                    InitInfo(strPostData)
//取消超链接自身的跳转
                    return false;
                });
                $(".pageLink").click(function () {

var href = $(this).attr("href");
                    var strPostData = href.substr(href.lastIndexOf(‘?‘) + 1);
                    // alert(strPostData);
                    InitInfo(strPostData)

return false;
                });
            })

时间: 2024-10-08 07:11:47

关于 异步无刷新分页的问题的相关文章

对自写的Asp.Net分页控件的应用方式(异步无刷新分页)

前台代码 <!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&quo

MVC无刷新分页(即局部刷新,带搜索,页数选择,排序功能)

我查看了很多网站,大部分评论分页都是局部刷新的,可大部分电商商品展示分页都是有刷新页面的,于是我便做了一个商品展示无刷新分页的例子.接下来我就将做一个模仿淘宝已买到的宝贝功能,不过我的是无刷新分页的. 至于为何要用无刷新分页(局部刷新)呢,我个人觉得有几点原因: 提高用户体验,无刷新分页网页看起来相对静止,滚轮不会跳到上面,加载速度比较快: 减轻网站服务器压力,返回局部页面(其中无需包含样式和脚本)肯定比返回整个页面要来的轻松: 还有个分页的好处就是减轻数据库的压力,返回几行的数据肯定比返回所有

jQuery+AJAX+Struts实现无刷新分页

jQuery+AJAX+Struts实现无刷新分页 说明: 1.需要jQuery插件js文件: 2.使用myeclipse添加struts能力: 从前从客户端页面向服务器发送Ajax请求,需要在js中先创建XMLHttpRequest对象,对象创建好以后使用OPEN('GET/POST',URL,同步/异步)设置提交方式,URL地址,使用同步还是异步方式.然后使用send(data)向服务器发送数据,同时使用onreadystatechange来绑定回调函数.如果是使用GET方式提交数据,那么就

Ajax实现无刷新分页

注:本文中使用到的一些类库在前面文章都能找到源代码,我会在文中指明链接所在,为了缩短文章篇幅,由此带来的阅读不便,敬请谅解. 本文讲解 Ajax 实现无刷新分页.实现原理.代码展示.代码下载. 这里需要说明一些知识: 1.Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态: 2.那么,Ajax 无刷新页面是运行在动态页面(.PHP)?还是静态页面(.html/.htm/.shtml)?答案是:静态页面: 3.实现原理

asp.net练习②——Paginaton无刷新分页

aspx代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>无刷新分页</title> <link href="c

无刷新分页 jquery.pagination.js

1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css). 点击获取查看这两个文件 2.页面js代码为 <script type="text/javascript"> var pageIndex = 0; //页面索引初始值 var pageSize = 15; //每页显示条数初始化,修改显示条数,修改这里即可 $

phpcms无刷新分页

控制器添加一个函数: 添加一个静态页面ajax_message.html,在页面中添加如下代码: 在要分页的页面(我的是"show"页面)中添加如上图代码: phpcms无刷新分页 2016-05-30 17:17:30 标签:ajaxphpcms分页it教育 控制器添加一个函数 添加一个静态页面ajax_message.html,在页面中添加如下代码:

Ajax 实现无刷新分页

Ajax 实现无刷新分页

smarty+php+ajax 简单无刷新分页

简介 分页,无非就是从数据库中获得我们想查询的数据,再加以处理即可! ① 确定数据总数($count) ② 每页显示数据条数($pageSize) ③ 分多少页($pageCount) ④ 上一页($pagePrev) ⑤ 下一页($pageNext) ⑥ 判断越界问题 ⑦ 偏移量($offset) ⑧ sql语句($sql = "select * from goods limit $offset,$pageSize";) 简单归简单,我们还得考虑实际的应用.例如:如果你正在土豆网看&