用jQuery中的ajax分页
去年的时候刚接触Jquery，也就做界面特效用了下，对其很有兴趣，迫于现在项目中不怎么用，对其甚是想念呀，这不没抽点时间再来看看Juery中好玩的东西。
功能简介：主要功能就是分页显示数据了，可在配置文件中配置每页要显示的页码,可以做多条件联合查询，这里只是做一个简单的查询。欢迎拍砖，有问题的还望大虾们斧正哈。看看这个效果图，无刷新的噢！！
具体实现请看源码：
1、aspx页面
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPage.aspx.cs" Inherits="MeasurementWellCurve.UI.AjaxPage" %>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head>
6 <title>ajax分页</title>
7 <link href="../CSS/tb_Style.css" rel="stylesheet" type="text/css" />
8 <script src="../JS/jquery-1.4.2.min.js" type="text/javascript"></script>
9
10 </head>
11 <body>
12 <form id="form1" runat="server">
13 <div id="divLayer">
14 <div>
15 编号：<asp:TextBox ID="txtCSBH" runat="server"></asp:TextBox><input id="btnSearch" type="button"
16 value="查询" />
17 </div>
18 <table id="jgcsTable" class="listTable" cellpadding="0" cellspacing="0">
19 <thead>
20 <tr>
21 <th>
22 测试编号
23 </th>
24 <th>
25 地层渗透率K
26 </th>
27 <th>
28 井筒储集常数C
29 </th>
30 <th>
31 表皮系数S
32 </th>
33 <th>
34 堵塞比
35 </th>
36 <th>
37 探测半径
38 </th>
39 <th>
40 拟合地层压力
41 </th>
42 <th>
43 边界距离
44 </th>
45 <th>
46 压力系数
47 </th>
48 <th>
49 复合储能比
50 </th>
51 <th>
52 操作
53 </th>
54 </tr>
55 </thead>
56 <tbody id="tb_body">
57 </tbody>
58 <tfoot id="load">
59 <tr>
60 <td align="center" colspan="11">
61 <img src="../images/loading.gif" />
62 </td>
63 </tr>
64 </tfoot>
65 </table>
66 <div class="navigation">
67 <div style="text-align: left; float: left; width: 260px;">
68 共<label id="lblToatl"></label>条数据 第[<label id="lblCurent"></label>]页/共[<label id="lblPageCount">0</label>]页
69 </div>
70 <div style="text-align: right; float: right;">
71 <a id="first" href="#">首页</a> <a id="previous" href="#">上一页</a> <a id="next" href="#">
72 下一页</a> <a id="last" href="#">末页</a>
73 </div>
74 </div>
75 </div>
76 </form>
77 </body>
78 </html>
2、具体实现JS
1 var pageIndex = 1; //页索引
2 var where = " where 1=1";
3 $(function() {
4 BindData();
5 // GetTotalCount(); //总记录条数
6 //GetPageCount(); //总页数绑定
7
8 //第一页按钮click事件
9 $("#first").click(function() {
10 pageIndex = 1;
11 $("#lblCurent").text(1);
12 BindData();
13 });
14
15 //上一页按钮click事件
16 $("#previous").click(function() {
17 if (pageIndex != 1) {
18 pageIndex--;
19 $("#lblCurent").text(pageIndex);
20 }
21 BindData();
22 });
23
24 //下一页按钮click事件
25 $("#next").click(function() {
26 var pageCount = parseInt($("#lblPageCount").text());
27 if (pageIndex != pageCount) {
28 pageIndex++;
29 $("#lblCurent").text(pageIndex);
30 }
31 BindData();
32 });
33
34 //最后一页按钮click事件
35 $("#last").click(function() {
36 var pageCount = parseInt($("#lblPageCount").text());
37 pageIndex = pageCount;
38 BindData();
39 });
40
41 //查询
42 $("#btnSearch").click(function() {
43 where = " where 1=1";
44 var csbh = $("#txtCSBH").val();
45 if (csbh != null && csbh != NaN) {
46 pageIndex = 1;
47 where += " and csbh like '%" + csbh + "%'";
48 }
49 BindData();
50 });
51 })
52
53 //AJAX方法取得数据并显示到页面上
54 function BindData() {
55 $.ajax({
56 type: "get", //使用get方法访问后台
57 dataType: "json", //返回json格式的数据
58 url: "../AjaxService/JgcsService.ashx", //要访问的后台地址
59 data: { "pageIndex": pageIndex, "where": where }, //要发送的数据
60 ajaxStart: function() { $("#load").show(); },
61 complete: function() { $("#load").hide(); }, //AJAX请求完成时隐藏loading提示
62 success: function(msg) {//msg为返回的数据，在这里做数据绑定
63 var data = msg.table;
64 if (data.length != 0) {
65 var t = document.getElementById("tb_body"); //获取展示数据的表格
66 while (t.rows.length != 0) {
67 t.removeChild(t.rows[0]); //在读取数据时如果表格已存在行．一律删除
68 }
69 }
70 $.each(data, function(i, item) {
71 $("#jgcsTable").append("<tr><td>" + item.CSBH + "</td><td>" + item.K + " </td><td>" + item.C +
72 " </td><td>" + item.S + " </td><td>" + item.DSB + " </td><td>" + item.TCBJ +
73 "</td><td>" + item.LHDCYL + " </td><td>" + item.BJJL + "</td><td>" + item.YLXS +
74 " </td><td>" + item.FCTH + " </td><td><a href='AjaxPaging.htm' target='blank'>" +
75 "<img src='../images/icon_06.gif' alt='查看详细信息'" +
76 "id='btnInsert'style='border-width:0px;' /></a></td></tr>");
77 })
78 },
79 error: function() {
80 var t = document.getElementById("tb_body"); //获取展示数据的表格
81 while (t.rows.length != 0) {
82 t.removeChild(t.rows[0]); //在读取数据时如果表格已存在行．一律删除
83 }
84 alert("加载数据失败");
85 } //加载失败，请求错误处理
86 //ajaxStop:$("#load").hide()
87 });
88 GetTotalCount();
89 GetPageCount();
90 bindPager();
91 }
92
93 // 页脚属性设置
94 function bindPager() {
95 //填充分布控件信息
96 var pageCount = parseInt($("#lblPageCount").text()); //总页数
97 if (pageCount == 0) {
98 document.getElementById("lblCurent").innerHTML = "0";
99 }
100 else {
101 if (pageIndex > pageCount) {
102 $("#lblCurent").text(1);
103 }
104 else {
105 $("#lblCurent").text(pageIndex); //当前页
106 }
107 }
108 document.getElementById("first").disabled = (pageIndex == 1 || $("#lblCurent").text() == "0") ? true : false;
109 document.getElementById("previous").disabled = (pageIndex <= 1 || $("#lblCurent").text() == "0") ? true : false;
110 document.getElementById("next").disabled = (pageIndex >= pageCount) ? true : false;
111 document.getElementById("last").disabled = (pageIndex == pageCount || $("#lblCurent").text() == "0") ? true : false;
112
113 }
114
115 //AJAX方法取得总页数
116 function GetPageCount() {
117 var pageCount;
118 $.ajax({
119 type: "get",
120 dataType: "text",
121 url: "../AjaxService/JgcsService.ashx",
122 data: { "wherePageCount": where }, //"wherePageCount" + where,个人建议不用这种方式
123 async: false,
124 success: function(msg) {
125 document.getElementById("lblPageCount").innerHTML = msg;
126 }
127 });
128 }
129 //AJAX方法取得记录总数
130 function GetTotalCount() {
131 var pageCount;
132 $.ajax({
133 type: "get",
134 dataType: "text",
135 url: "../AjaxService/JgcsService.ashx",
136 data: { "whereCount": where },
137 async: false,
138 success: function(msg) {
139 document.getElementById("lblToatl").innerHTML = msg;
140 }
141 });
142 }
3、一般处理程序ashx中的代码
1 public class JgcsService : IHttpHandler
2 {
3 readonly int pageSize = 15;
4 public void ProcessRequest(HttpContext context)
5 {
6 context.Response.ContentType = "text/plain";
7 //不让浏览器缓存
8 context.Response.Buffer = true;
9 context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
10 context.Response.AddHeader("pragma", "no-cache");
11 context.Response.AddHeader("cache-control", "");
12 context.Response.CacheControl = "no-cache";
13
14 string result = "";
15 //记录总条数
16 if (!string.IsNullOrEmpty(context.Request["whereCount"]))
17 {
18 string where = context.Request.Params["whereCount"].ToString();
19 result = Jgcs.GetToatlNum(where).ToString();
20 }
21
22 //总页数
23 if (!string.IsNullOrEmpty(context.Request["wherePageCount"]))
24 {
25 string where = context.Request.Params["wherePageCount"].ToString();
26 int count = Jgcs.GetToatlNum(where);
27 string pageCount = Math.Ceiling((double)count / (double)pageSize).ToString();
28 result = pageCount;
29 }
30
31 //分页数据
32 if (!string.IsNullOrEmpty(context.Request.Params["pageIndex"])
33 && !string.IsNullOrEmpty(context.Request.Params["where"]))
34 {
35 string where = context.Request.Params["where"].ToString();
36 int pageIndex = Convert.ToInt32(context.Request.Params["pageIndex"]);
37 result = GetJsonString(where, pageIndex);
38 }
39 context.Response.Write(result);
40 }
41
42 /// <summary>
43 /// 返回json串
44 /// </summary>
45 /// <param name="where">查询条件</param>
46 /// <param name="pageIndex">页面索引</param>
47 /// <returns>json串</returns>
48 protected string GetJsonString(string where, int pageIndex)
49 {
50 DataTable dt = Jgcs.GetInfo("csbh", where, pageIndex, pageSize);
51 return JsonHelper.DataTable2Json(dt, "table");
52 }
53
54 public bool IsReusable
55 {
56 get
57 {
58 return false;
59 }
60 }
61 }
4、分页查询的方法可看可不看了，都会这个吧，做示例简单的开了个头，应用时在处理方面可不要这么去写噢，贴下来仅做一个参考
分页方法
/// <summary>
/// 分页查询的方法
/// </summary>
/// <param name="orderFile">排序字段</param>
/// <param name="where">查询条件</param>
/// <param name="pageNumber">当前页</param>
/// <param name="pageSize">页大小</param>
/// <returns></returns>
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();
}
}
/// <summary>
/// 结果参数总条数
/// </summary>
/// <param name="where"></param>
/// <returns></returns>
public static int GetToatlNum(string where)
{
DBHelper db = new DBHelper();
string strSql = string.Format(@"select count(*) from (select CSBH,K,C,S,DSB,TCBJ,LHDCYL,BJJL,BJLX,YLXS,FCTH,KHM1,KHM2,QKCS from YW_JGCS) temp {0}", where);
try
{
db.DBOpen();
return (int)db.ExecuteScalar(strSql);
}
catch (Exception ex)
{
throw ex;
}
finally
{
db.DBClose();
}
}
好了，代码就这么多
