首页 > 网络编程 > JavaScript > javascript类库 > jquery > ajax分页

用jQuery中的ajax分页实现代码

2011-09-20 22:10:49 作者：

去年的时候刚接触Jquery，也就做界面特效用了下，对其很有兴趣，迫于现在项目中不怎么用，对其甚是想念呀，这不没抽点时间再来看看Juery中好玩的东西。

功能简介：主要功能就是分页显示数据了，可在配置文件中配置每页要显示的页码,可以做多条件联合查询，这里只是做一个简单的查询。欢迎拍砖，有问题的还望大虾们斧正哈。看看这个效果图，无刷新的噢！！

具体实现请看源码：

1、aspx页面

 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPage.aspx.cs" Inherits="MeasurementWellCurve.UI.AjaxPage" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>ajax分页</title> 
<link href="../CSS/tb_Style.css" rel="stylesheet" type="text/css" /> 
<script src="../JS/jquery-1.4.2.min.js" type="text/javascript"></script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div id="divLayer"> 
<div> 
编号：<asp:TextBox ID="txtCSBH" runat="server"></asp:TextBox><input id="btnSearch" type="button" 
value="查询" /> 
</div> 
<table id="jgcsTable" class="listTable" cellpadding="0" cellspacing="0"> 
<thead> 
<tr> 
<th> 
测试编号 
</th> 
<th> 
地层渗透率K 
</th> 
<th> 
井筒储集常数C 
</th> 
<th> 
表皮系数S 
</th> 
<th> 
堵塞比 
</th> 
<th> 
探测半径 
</th> 
<th> 
拟合地层压力 
</th> 
<th> 
边界距离 
</th> 
<th> 
压力系数 
</th> 
<th> 
复合储能比 
</th> 
<th> 
操作 
</th> 
</tr> 
</thead> 
<tbody id="tb_body"> 
</tbody> 
<tfoot id="load"> 
<tr> 
<td align="center" colspan="11"> 
<img src="../images/loading.gif" /> 
</td> 
</tr> 
</tfoot> 
</table> 
<div class="navigation"> 
<div style="text-align: left; float: left; width: 260px;"> 
共<label id="lblToatl"></label>条数据 第[<label id="lblCurent"></label>]页/共[<label id="lblPageCount">0</label>]页 
</div> 
<div style="text-align: right; float: right;"> 
<a id="first" href="#">首页</a> <a id="previous" href="#">上一页</a> <a id="next" href="#"> 
下一页</a> <a id="last" href="#">末页</a> 
</div> 
</div> 
</div> 
</form> 
</body> 
</html> 

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.rows[0]); //在读取数据时如果表格已存在行．一律删除 
} 
} 
$.each(data, function(i, item) { 
$("#jgcsTable").append("<tr><td>" + item.CSBH + "</td><td>" + item.K + "&nbsp;</td><td>" + item.C + 
"&nbsp;</td><td>" + item.S + "&nbsp;</td><td>" + item.DSB + "&nbsp;</td><td>" + item.TCBJ + 
"</td><td>" + item.LHDCYL + "&nbsp;</td><td>" + item.BJJL + "</td><td>" + item.YLXS + 
"&nbsp;</td><td>" + item.FCTH + "&nbsp;</td><td><a href='AjaxPaging.htm' target='blank'>" + 
"<img src='../images/icon_06.gif' alt='查看详细信息'" + 
"id='btnInsert'style='border-width:0px;' /></a></td></tr>"); 
}) 
}, 
error: function() { 
var t = document.getElementById("tb_body"); //获取展示数据的表格 
while (t.rows.length != 0) { 
t.removeChild(t.rows[0]); //在读取数据时如果表格已存在行．一律删除 
} 
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 <= 1 || $("#lblCurent").text() == "0") ? true : false; 
document.getElementById("next").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.Request["whereCount"])) 
{ 
string where = context.Request.Params["whereCount"].ToString(); 
result = Jgcs.GetToatlNum(where).ToString(); 
} 
//总页数 
if (!string.IsNullOrEmpty(context.Request["wherePageCount"])) 
{ 
string where = context.Request.Params["wherePageCount"].ToString(); 
int count = Jgcs.GetToatlNum(where); 
string pageCount = Math.Ceiling((double)count / (double)pageSize).ToString(); 
result = pageCount; 
} 
//分页数据 
if (!string.IsNullOrEmpty(context.Request.Params["pageIndex"]) 
&& !string.IsNullOrEmpty(context.Request.Params["where"])) 
{ 
string where = context.Request.Params["where"].ToString(); 
int pageIndex = Convert.ToInt32(context.Request.Params["pageIndex"]); 
result = GetJsonString(where, pageIndex); 
} 
context.Response.Write(result); 
} 
/// <summary> 
/// 返回json串 
/// </summary> 
/// <param name="where">查询条件</param> 
/// <param name="pageIndex">页面索引</param> 
/// <returns>json串</returns> 
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、分页查询的方法可看可不看了，都会这个吧，做示例简单的开了个头，应用时在处理方面可不要这么去写噢，贴下来仅做一个参考
分页方法

复制代码代码如下:

 
/// <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(); 
} 
} 

好了，代码就这么多

用jQuery中的ajax分页实现代码

您可能感兴趣的文章: