您的位置：首页 > Web前端 > JQuery

ASP.NET+JQuery实现AJAX的分页

2008-09-26 12:14 369 查看

　　前段时间自己研究JQuery时，觉得JQuery很强大，在项目中就用到了AJAX的分页，实现思路是：

　　1.利用$.fn.extend在JQuery框架下扩展pager类

　　2.将获取记录总数与相应页记录的后台方法，写在继承自IHttpHandler类的Handler.ashx.cs类，当然实际上用aspx.cs文件写后台方法也没问题，但由于.ashx.cs文件无需处理页面诸多事件因而效率更高。

　　3.在呈现页面上加载pager类

　　以下是实现的代码：

1.扩展pager类:extend.js

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Pager.aspx.cs" Inherits="App.Pager" %>

<!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 runat="server">
<title>AjaxPager</title>
<script src="../Scripts/jquery-1.2.3-intellisense.js" type="text/javascript"></script>
<script src="../Scripts/extend.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var totalCount = 0;
$.ajax({
type: "get",
dataType: "text",
url: "../Handler/HandlerTest.ashx",
data: "getPageCount=1",
async: false,
success: function(msg){
totalCount = parseInt(msg);
alert(totalCount);
}
});

$('#mypage').pager(totalCount,{
callback:function(page){
$("[@id=ready]").remove();
$("#load").show();
$.ajax({
type: "get",
dataType: "json",
url: "../Handler/HandlerTest.ashx",
data: "pageIndex=" + page,/
complete :function(){$("#load").hide();},
success: function(msg){//msg为返回的数据，在这里做数据绑定
$.each(msg.table, function(i, n){
var row = $("#template").clone();
row.find("#StockCode").text(n.StockCode);
row.find("#SumDealNum").text(n.SumDealNum);
row.find("#SumDealMoney").text(n.SumDealMoney);
row.find("#SumBargainExpense").text(n.SumBargainExpense);
row.find("#Profit").text(n.Profit);
row.find("#LeftDealNum").text(n.LeftDealNum);
row.attr("id","ready");//改变绑定好数据的行的id
row.appendTo("#datas");//添加到模板的容器中
});
$("[@id=ready]").show();
}
});
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="mypage" ></div>
<div>
<ul id="datas">
<li id="template">
<span id="StockCode">
StockCode
</span>/
<span id="SumDealNum">
SumDealNum
</span>/
<span id="SumDealMoney">
SumDealMoney
</span>/
<span id="SumBargainExpense">
SumBargainExpense
</span>/
<span id="Profit">
Profit
</span>/
<span id="LeftDealNum">
LeftDealNum
</span>
</li>
</ul>
</div>
<div id="load" style="right: 0px; position: absolute; top: 0px; background-color: red; display:none;">
LOADING

.
</div>
</form>
</body>
</html>

　　这个实现只是初步方案，扩展方法和页面元素关联度太大，因此我准备做优化的方案，也请大家给我些更好的建议或实现方法。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航