用jQuery中的ajax分页实现代码.doc

用jQuery中的ajax分页实现代码去年的时候刚接触Jquery，也就做界面特效用了下，对其很有兴趣，迫于现在项目中不怎么用，对其甚是想念呀，这不没抽点时间再来看看Juery中好玩的东西。功能简介：主要功能就是分页显示数据了，可在配置文件中配置每页要显示的页码,可以做多条件联合查询，这里只是做一个简单的查询。欢迎拍砖，有问题的还望大虾们斧正哈。看看这个效果图，无刷新的噢！ 具体实现请看源码： 1、aspx页面复制代码 代码如下: ajax分页 编号： 测试编号 地层渗透率K 井筒储集常数C 表皮系数S 堵塞比 探测半径 拟合地层压力 边界距离 压力系数 复合储能比 操作 共条数据 第页/共0页 首页 上一页 下一页 末页 2、具体实现JS 复制代码 代码如下: var pageIndex = 1; /页索引 var where = where 1=1; $(function() BindData(); / GetTotalCount(); /总记录条数 /GetPageCount(); /总页数绑定 /第一页按钮click事件 $(#first).click(function() pageIndex = 1; $(#lblCurent).text(1); BindData(); ); /上一页按钮click事件 $(#previous).click(function() if (pageIndex != 1) pageIndex-; $(#lblCurent).text(pageIndex); BindData(); ); /下一页按钮click事件 $(#next).click(function() var pageCount = parseInt($(#lblPageCount).text(); if (pageIndex != pageCount) pageIndex+; $(#lblCurent).text(pageIndex); BindData(); ); /最后一页按钮click事件 $(#last).click(function() var pageCount = parseInt($(#lblPageCount).text(); pageIndex = pageCount; BindData(); ); /查询 $(#btnSearch).click(function() where = where 1=1; var csbh = $(#txtCSBH).val(); if (csbh != null & csbh != NaN) pageIndex = 1; where += and csbh like % + csbh + %; BindData(); ); ) /AJAX方法取得数据并显示到页面上 function BindData() $.ajax( type: get, /使用get方法访问后台 dataType: json, /返回json格式的数据 url: ./AjaxService/JgcsService.ashx, /要访问的后台地址 data: pageIndex: pageIndex, where: where , /要发送的数据 ajaxStart: function() $(#load).show(); , complete: function() $(#load).hide(); , /AJAX请求完成时隐藏loading提示 success: function(msg) /msg为返回的数据，在这里做数据绑定 var data = msg.table; if (data.length != 0) var t = document.getElementById(tb_body); /获取展示数据的表格 while (t.rows.length != 0) t.removeChild(t.rows0); /在读取数据时如果表格已存在行一律删除 $.each(data, function(i, item) $(#jgcsTable).append( + item.CSBH + + item.K + + item.C + + item.S + + item.DSB + + item.TCBJ + + item.LHDCYL + + item.BJJL + + item.YLXS + + item.FCTH + + ); ) , error: function() var t = document.getElementById(tb_body); /获取展示数据的表格 while (t.rows.length != 0) t.removeChild(t.rows0); /在读取数据时如果表格已存在行一律删除 alert(加载数据失败); /加载失败，请求错误处理 /ajaxStop:$(#load).hide() ); GetTotalCount(); GetPageCount(); bindPager(); / 页脚属性设置 function bindPager() /填充分布控件信息 var pageCount = parseInt($(#lblPageCount).text(); /总页数 if (pageCount = 0) document.getElementById(lblCurent).innerHTML = 0; else if (pageIndex pageCount) $(#lblCurent).text(1); else $(#lblCurent).text(pageIndex); /当前页 document.getElementById(first).disabled = (pageIndex = 1 | $(#lblCurent).text() = 0) ? true : false; document.getElementById(previous).disabled = (pageIndex = pageCount) ? true : false; document.getElementById(last).disabled = (pageIndex = pageCount | $(#lblCurent).text() = 0) ? true : false; /AJAX方法取得总页数 function GetPageCount() var pageCount; $.ajax( type: get, dataType: text, url: ./AjaxService/JgcsService.ashx, data: wherePageCount: where , /wherePageCount + where,个人建议不用这种方式 async: false, success: function(msg) document.getElementById(lblPageCount).innerHTML = msg; ); /AJAX方法取得记录总数 function GetTotalCount() var pageCount; $.ajax( type: get, dataType: text, url: ./AjaxService/JgcsService.ashx, data: whereCount: where , async: false, success: function(msg) document.getElementById(lblToatl).innerHTML = msg; ); 3、一般处理程序ashx中的代码 复制代码 代码如下: public class JgcsService : IHttpHandler readonly int pageSize = 15; public void ProcessRequest(HttpContext context) context.Response.ContentType = text/plain; /不让浏览器缓存 context.Response.Buffer = true; context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1); context.Response.AddHeader(pragma, no-cache); context.Response.AddHeader(cache-control, ); context.Response.CacheControl = no-cache; string result = ; /记录总条数 if (!string.IsNullOrEmpty(context.RequestwhereCount) string where = context.Request.ParamswhereCount.ToString(); result = Jgcs.GetToatlNum(where).ToString(); /总页数 if (!string.IsNullOrEmpty(context.RequestwherePageCount) string where = context.Request.ParamswherePageCount.ToString(); int count = Jgcs.GetToatlNum(where); string pageCount = Math.Ceiling(double)count / (double)pageSize).ToString(); result = pageCount; /分页数据 if (!string.IsNullOrEmpty(context.Request.ParamspageIndex) & !string.IsNullOrEmpty(context.Request.Paramswhere) string where = context.Request.Paramswhere.ToString(); int pageIndex = Convert.ToInt32(context.Request.ParamspageIndex); result = GetJsonString(where, pageIndex); context.Response.Write(result); / / 返回json串 / / 查询条件 / 页面索引 / json串 protected string GetJsonString(string where, int pageIndex) DataTable dt = Jgcs.GetInfo(csbh, where, pageIndex, pageSize); return JsonHelper.DataTable2Json(dt, table); public bool IsReusable get return false; 4、分页查询的方法可看可不看了，都会这个吧，做示例简单的开了个头，应用时在处理方面可不要这么去写噢，贴下来仅做一个参考 分页方法 复制代码 代码如下: / / 分页查询的方法 / / 排序字段 / 查询条件 / 当前页 / 页大小 / public static DataTable GetInfo(string orderFile, string where, int pageNumber, int pageSize) DBHelper db = new DBHelper(); string str = with TestInfo as ( select row_number() over(order by 0 desc) as rowNumber,* from (select CSBH,K,C,S,DSB,TCBJ,LHDCYL,BJJL,BJLX,YLXS,FCTH,KHM1,KHM2,QKCS from YW_JGCS) temp 1 ) select * from TestInfo where rowNumber between (2-1)*3+1) and 2*3; string strSql = string.Format(str, orderFile, where, pageNumber, pageSize); try db.DBOpen(); return db.DbDataSet(strSql); catch (Exception ex) throw ex; finally db.DBClose(); / / 结果参数总条数 / / / public static int GetToatlNum(string where) DBHelpe