用jQuery中的ajax分页实现代码

时间：2021-03-17 09:41:49|栏目：jquery|点击：次

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

具体实现请看源码：

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 EasyUI的一些常用组件

栏目：jquery

下一篇：一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子

本文标题：用jQuery中的ajax分页实现代码

本文地址：http://www.codeinn.net/misctech/82652.html

更多jquery

jquery

用jQuery中的ajax分页实现代码

阅读排行

推荐教程