编程 Javascript

用jQuery中的ajax分页实现代码

Posted in Javascript onSeptember 20, 2011

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

用jQuery中的ajax分页实现代码

具体实现请看源码：

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 + " </td><td>" + item.C + 
" </td><td>" + item.S + " </td><td>" + item.DSB + " </td><td>" + item.TCBJ + 
"</td><td>" + item.LHDCYL + " </td><td>" + item.BJJL + "</td><td>" + item.YLXS + 
" </td><td>" + item.FCTH + " </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分页实现代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript的Cookies

Jan 16 Javascript

javascript firefox兼容ie的dom方法脚本

May 18 Javascript

JQUERY复选框CHECKBOX全选,取消全选

Aug 30 Javascript

IE8 兼容性问题（属性名区分大小写）

Jun 04 Javascript

js实现的真正的iframe高度自适应(兼容IE,FF,Opera)

Mar 07 Javascript

JavaScript获取FCK编辑器信息的具体方法

Jul 12 Javascript

基于jQuery实现左右图片轮播（原理通用）

Dec 24 Javascript

Angular外部使用js调用Angular控制器中的函数方法或变量用法示例

Aug 05 Javascript

angularJS实现动态添加,删除div方法

Feb 27 Javascript

JS实现关键词高亮显示正则匹配

Jun 22 Javascript

微信小程序实现的picker多级联动功能示例

May 23 Javascript

详解如何修改 node_modules 里的文件

May 22 Javascript

jquery模拟按下回车实现代码

Sep 20 #Javascript

一个分享按钮的插件使用介绍（可扩展，内附开发制作流程）

Sep 19 #Javascript

50个比较实用jQuery代码段

Sep 18 #Javascript

最新的10款jQuery内容滑块插件分享

Sep 18 #Javascript

Jquery 表格合并的问题分享

Sep 17 #Javascript

当jQuery遭遇CoffeeScript的时候使用分享

Sep 17 #Javascript

jquery blockUI 遮罩不能消失与不能提交的解决方法

Sep 17 #Javascript