getJSON()+.ashx分页优化版。
改进的地方:
1、ashx返回json数据,减少传输数据量,html页面样式控制也比较灵活;2、改写html页的jQuery代码;
3、把3个ashx文件简化为1个。
一、创建表的测试数据:create table test(id int identity,title varchar(36)) declare @index int; set @index = 1; while(@index < 8888) begin insert test(title) values (newid()) set @index = @index + 1 end
二、.html页
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function() { Init(); }); function Init() { $("#Content").html(""); $("#pageIndex").val(0); $("#pageInfo").append("当前第1页"); $.getJSON("Handler.ashx", { type: 'first' }, function(data) { $("#Content").append("<tr><th style='width:130px'>id</th><th style='width:150px'>title</th></tr>"); $.each(data, function(i) { $("#Content").append("<tr><td>" + data[i].id + "</td><td>" + data[i].title + "</td></tr>"); }) }) } function Pre() { var currIndex = Number($("#pageIndex").val()) - 1; Go('pre', currIndex); } function Next() { var currIndex = Number($("#pageIndex").val()) + 1; Go('next', currIndex); } function Go(type, index) { $("#Content").html(""); $("#pageInfo").html(""); if (index == 0 || index == -1) { Init(); return; } $.getJSON("Handler.ashx", { type: type, index: index }, function(data) { $("#Content").append("<tr><th style='width:130px'>id</th><th style='width:150px'>title</th></tr>"); $.each(data, function(i) { $("#Content").append("<tr><td>" + data[i].id + "</td><td>" + data[i].title + "</td></tr>"); }) $("#pageInfo").append("当前第 " + (index + 1) + " 页"); $("#pageIndex").val(index); }); } </script> </head> <body> <form id="form1" runat="server"> <div style="width: 100%"> <table id="Content" > </table> </div> <div id="PagePanel" style="margin-left:20px"> <label id="pageInfo"></label> <a href="#" onclick="Pre()">上一页</a> <a href="#" onclick="Next()">下一页</a> </div> <input type="hidden" value="0" id="pageIndex" /> </form> </body> </html>
三、.ashx页
public class Handler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; StringBuilder tb = new StringBuilder(); DataBase db = new DataBase(); int pageSize = 10; int pageIndex = 0; string type = context.Request.Params["type"]; switch (type) { case "first": DataTable dt1 = db.GetDataSet("select top 10 * from test", null).Tables[0]; tb.Append(Common.DataTableToJSON(dt1, true)); //DataTable转为JSON break; case "next": pageIndex = Convert.ToInt32(context.Request.Params["index"]); DataTable dt2 = db.GetDataSet("select top " + pageSize.ToString() + " * from test where id> (select max(id) from (select top " + (pageSize * pageIndex).ToString() + " id from test) t)", null).Tables[0]; tb.Append(Common.DataTableToJSON(dt2, true)); break; case "pre": pageIndex = Convert.ToInt32(context.Request.Params["index"]); DataTable dt3 = db.GetDataSet("select top " + pageSize.ToString() + " * from test where id> (select max(id) from (select top " + (pageSize * pageIndex).ToString() + " id from test) t)", null).Tables[0]; tb.Append(JSONHelper.DataTableToJSON(dt)); break; } context.Response.Write(tb.ToString()); } public bool IsReusable { get { return false; } } }
网友评论文明上网理性发言 已有0人参与
发表评论: