jQuery getJSON().ashx实现分页（改进版)

参考了：//www .JB 51。net/article/35110。html文件的后缀改进的地方：1、ashx返回json数据，减少传输数据量，html页面样式控制也比较灵活；2、改写超文本标记语言页的jQuery代码；3、把3个ashx文件简化为一个。一、创建表的测试数据：复制代码代码如下：创建表测试(id int identity，title varchar(36))声明@ index int set @ index=1；while(@index 8888)开始插入测试(标题)值(newid())设置@index=@index 1结束二、超文本标记语言页复制代码代码如下： html xmlns=' http://www。w3。org/1999/XHTML ' head runat=' server ' title/title脚本类型=' text/JavaScript ' src=' http : jquery-1。4 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(function(){ Init()；});函数Init() { $('#Content ').html(" ")；$('#pageIndex ').val(0)；$('#pageInfo ').追加('当前第一页');$.getJSON('Handler.ashx '，{ type: 'first' }，函数（数据){ $('#Content ').追加(“trth style=”width :130 px“id/thth style=”width :150 px“title/th/tr”)；$.每个（数据、函数{ $(' # Content ').追加(“trtd”数据[i].id '/tdtd '数据[i].标题'/TD/tr ')；}) }))函数pre(){ var currIndex=Number($(' # page index ')).val())-1；Go('pre '，currIndex)；}函数next(){ var currIndex=Number($(' # page index ').val())1；Go('next '，currIndex)；}函数Go(类型，索引){ $('#Content ').html(" ")；$('#pageInfo ').html(" ")；if(index==0 | | index==-1){ Init()；返回；} $.getJSON('Handler.ashx '，{ type: type，index: index })，函数(数据){ $('#Content ').追加(“trth style=”width :130 px“id/thth style=”width :150 px“title/th/tr”)；$.每个（数据、函数{ $(' # Content ').追加(“trtd”数据[i].id '/tdtd '数据[i].标题'/TD/tr ')；}) $('#pageInfo ').追加('当前第（索引1)页');$('#pageIndex ').val(索引);});}/script/head body form id=' form 1 ' runat=' server ' div style=' width : 100% ' table id=' Content '/table/div div id=' page panel ' style=' margin-left :20 px ' label id=' page info '/label a href=' # ' onclick=' Pre()'上一页/a a href='#' onclick='Next()'下一页/a /div输入类型='隐藏'值='0' id='pageIndex' /表单/正文/html三、ashx页复制代码代码如下：公共类处理程序： IHttpHandler { public void process request(HttpContext context){ context } .响应。内容类型='文本/纯文本；StringBuilder TB=new StringBuilder()；DataBase db=new DatabaSe()；int pageSize=10int页面索引=0；字符串类型=上下文。请求参数['类型'];switch(type){ case ' first ' : DataTable dt1=db .GetDataSet('从测试中选择前10名*，null ).表[0];肺结核。追加（常见DataTableToJSON(dt1，true))；//DataTable转为JSON中断；案例"下一个":页面索引=转换. ToInt32(上下文请求。params[' index '])；数据表dt2=db .GetDataSet('选择顶部'页面大小测试中的ToString() ' *，其中id(选择最大(id)从(选择' top '(页面大小*页面索引))。ToString()"来自测试的id(t))”，空).表[0];肺结核。追加（常见DataTableToJSON(dt2，true))；打破；案例“pre”:页面索引=转换. ToInt32(上下文请求。params[' index '])；DataTable dt3=db .GetDataSet('选择顶部'页面大小测试中的ToString() ' *，其中id(选择最大(id)从(选择' top '(页面大小*页面索引))。ToString()"来自测试的id(t))”，空).表[0];肺结核。追加(JSONHelper .DataTableToJSON(dt))；打破；}上下文。回应。写(tb .ToString())；} public bool IsReuse { get { return false；} } } 四、效果

-备注(2010-7-10): 用sql2005行号()分页方法，ashx页面代码可简化为复制代码代码如下：公共类处理程序： IHttpHandler { public void process request(HttpContext context){ context } .响应。内容类型='文本/纯文本；DataBase db=new DatabaSe()；int pageSize=10int页面索引=0；里面的（上下文请求。Params['index']，页外索引)；字符串类型=上下文。请求参数['类型'];字符串sql=字符串。格式(' select * from(select row _ number()))over(按id排序)为rowNum，*来自测试)为t ' '，其中rowNum{0}和rowNum={1} '，pageIndex * pageSize，(页面索引1)*页面大小)；数据表dt=db .GetDataSet(sql，null).表[0];语境。响应。写入(JSONHelper .DataTableToJSON(dt))；} public bool IsReuse { get { return false；} } } 备注：其中JSONHelper .DataTableToJSON(dt)方法为数据表解析成JSON，见另一篇文章JSONHelper帮助类