编程 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 isPrototypeOf和hasOwnProperty使用区别

Mar 04 Javascript

JavaScript 面向对象编程（1）基础

May 18 Javascript

JS中prototype关键字的功能介绍及使用示例

Jul 21 Javascript

AngularJS Module方法详解

Dec 08 Javascript

7个去伪存真的JavaScript面试题

Jan 07 Javascript

完美实现八种js焦点轮播图（上篇）

Jul 18 Javascript

jquery实现全选、不选、反选的两种方法

Sep 06 Javascript

ES6学习教程之Map的常用方法总结

Aug 03 Javascript

JS实现websocket长轮询实时消息提示的效果

Oct 10 Javascript

Vue 实时监听窗口变化 windowresize的两种方法

Nov 06 Javascript

浅谈vue加载优化策略

Mar 19 Javascript

JavaScript函数柯里化实现原理及过程

Dec 02 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