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

好了,代码就这么多
Javascript 相关文章推荐
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
js 函数性能比较方法
Aug 24 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
You might like
随机广告显示(PHP函数)
2006/10/09 PHP
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
JS面向对象编程 for Cookie
2010/09/19 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
python基础教程之元组操作使用详解
2014/03/25 Python
python实现得到一个给定类的虚函数
2014/09/28 Python
python中list常用操作实例详解
2015/06/03 Python
pandas 选择某几列的方法
2018/07/03 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
德国电子商城:ComputerUniverse
2017/04/21 全球购物
银行会计职员个人的自我评价
2013/09/29 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
Win11软件图标固定到任务栏
2022/04/19 数码科技