Asp.net + jQuery + jQuery pager plugin + Sql Server 利用Ajax实现真正的无刷新分页浏览,彻底不依赖于页面后台的支持,直接利用ajax进行异步取得数据。
学习新东西时,如果没人指导,肯定少不了走弯路。就这一个功能,我弄了两天(其实是我笨),前一天半根本不知道怎么弄,尤其是获取总页数的时候,根本无法理解,最后半天,在前一天半的基础上,突然顿悟,终于实现了愿望,所以一定要记下来。
说明:
(1)jQuery pager plugin插件,看到很多例子都是把待分页的数据一次性准备后,然后供其进行分页处理,细想一下,如果要分页的数据有几W条甚至几十万上百万条,这种策略可能不行,所以使用了分页存储过程,每次只读取一页的数据,这样就减小了数据传输量。
(2)数据总页数 看到更多的例子都是在后台设定一个变量记录总页数,然后在界面的html里让jQuery pager plugin去取得这个变量值,然后进行分页导航的处理。这样似乎每次都得更新这个后台变量,如果不更新就会出错喽(试想一下,如果你正在读取第6页的数据列表,可能你读了10分钟,而这10分钟内,别人又添加了N条记录,如果你不更新这个后台总页数的变量,那分页jQuery pager plugin插件就处理了错误的数据了,如果要每次要更新,那就不是无刷新效果了),所以我采用了一个笨方法来实现无刷新更新。其实焦点就是总页数的处理问题。
(3)思路很简单,页面第一次加载的时候先通过一个异步请求取得总页数TotalPages,然后把TotalPages交给jQuery pager plugin插件进行分页处理,接着去读取也是异步去取得第一页的数据,其实每次读新一页的数据都是要进行上面的重复操作。
(4)分页存储过程是利用别人的,在此借用一下,不过时间久了,找不到原文地址,不好意思。其他的jQuery 和jQuery pager plugin插件都是网上共享的。
上代码看看吧:
(1)创建表脚本
[ ID ] [ int ] IDENTITY ( 1 , 1 ) NOT NULL ,
[ FileName ] [ nvarchar ] ( 50 ) ,
[ FileLength ] [ int ] ,
[ FilePath ] [ nvarchar ] ( 50 ) ,
[ FileDescription ] [ nvarchar ] ( 50 )
)
分页存储过程
B 取得某分页的数据
ajax.aspx.cs
//..
StringBuilder sb = new StringBuilder();
DataTable dt = new DataTable();
SqlDataAdapter sda = new SqlDataAdapter(cmd);
sda.Fill(dt);
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
sb.Append("<table width='1000px' border='0' cellpadding='0' cellspacing='1' bgcolor='#0066ff'>");
sb.Append("<tr>");
sb.Append("<td bgcolor='white' width='50px'>" + dt.Rows[i][0].ToString() + "</td>");
sb.Append("<td bgcolor='white' width='1500px'>" + dt.Rows[i][1].ToString() + "</td>");
sb.Append("<td bgcolor='white' width='200px'>" + dt.Rows[i][2].ToString() + "</td>");
sb.Append("<td bgcolor='white' width='100px'>" + dt.Rows[i][3].ToString() + "</td>");
//sb.Append("<td bgcolor='white' width='20px'>" + dt.Rows[i][4].ToString() + "</td>");
sb.Append("</tr>");
sb.Append("</table>");
}
}
Response.Write(sb.ToString());
(3)前台页面
引用jquery-1.3.js、引用 jquery.pager.js、引用Pager.css
html
<form id="form1" runat="server">
<script language="javascript" type="text/javascript">
//总页数,每次请求都要更新该变量,有的地方是在该页的cs文件里设一个变量,那样每次都要更新该变量,似乎就不是异步刷新了
var total;//很重要很重要的关键点
//异步取得总页数
GetTotal=function()
{
$.ajax({
url: 'total.aspx',
type: 'GET',
data: {},
timeout: 1000,
error: function(data){
alert(data.responseText);
},
success: function(data){
total=data.responseText;
//alert(total);
}
});
}
//页面加载完的时候进行初始化操作
$(document).ready(function()
{
GetTotal();//异步取得总页数
$("#pager").pager({ pagenumber: 1, pagecount: total, buttonClickCallback: PageClick }); //初始化分页导航
PageClick(1);//页面初次加载时显示第一页
});
//单节分页导航数字是执行异步加载数据
PageClick = function(pageclickednumber)
{
$("#pager").pager({ pagenumber: pageclickednumber, pagecount: total, buttonClickCallback: PageClick });
$.ajax({
url: 'ajax.aspx',
type: 'GET',
data: {pageindex: pageclickednumber},
timeout: 1000,
error: function(data){
alert(data.responseText);
},
success: function(data){
$("#result").html(data);
}
});
}
</script>
<div id="result" style="font-size:13px;">分页器 </div>
<div id="pager" ></div>
</form>
效果图,样式很难看,但实现了效果。