用jQuery中的ajax分页实现代码
作者： 字体：[ ] 类型：转载 时间：2011-09-20
去年的时候刚接触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" type="text/css" />
<script src="../JS/jquery-1.4.2.min.js" type="text/javascript"></script>
</head>
<body>
<form runat="server">
<div>
<div>
编号：<asp:TextBox runat="server"></asp:TextBox><input type="button"
value="查询" />
</div>
<table 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>
</tbody>
<tfoot>
<tr>
<td colspan="11">
<img src="../images/loading.gif" />
</td>
</tr>
</tfoot>
</table>
<div>
<div>
共<label></label>条数据 第[<label></label>]页/共[<label>0</label>]页
</div>
<div>
<a href="#">首页</a> <a href="#">上一页</a> <a href="#">
下一页</a> <a 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中的代码
复制代码 代码如下:
相关文章
精彩导读
热门资讯
关注我们
