今天做了 异步无刷新分页 ,之前自己的想法是 异步加载每一页的内容,传入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;
});
})