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)创建表脚本
CREATE TABLE [dbo].[Product](
[ID] [int] IDENTITY(1,1) NOT NULL,
[FileName] [nvarchar](50) ,
[FileLength] [int] ,
[FilePath] [nvarchar](50) ,
[FileDescription] [nvarchar](50)
)
分页存储过程
Code
CREATE PROCEDURE [dbo].[PageResult]
@currPage int = 1, --请求的页码
@showColumn varchar(2000) = '*', --字段
@tabName varchar(2000), --表名
@strCondition varchar(2000) = '', --where条件
@ascColumn varchar(100) = '', --排序的字段名
@bitOrderType bit = 0, --排序类型 0为升序,1为降序
@pkColumn varchar(50) = '', --主键名称
@pageSize int = 20 --每页记录数
AS
BEGIN
DECLARE @strTemp varchar(1000)
DECLARE @strSql varchar(4000) --构造Sql语句
DECLARE @strOrderType varchar(1000) --排序类型语句 (order by column asc或者order by column desc)
BEGIN
IF @bitOrderType = 1 -- bitOrderType=1即执行降序
BEGIN
SET @strOrderType = ' ORDER BY '+@ascColumn+' DESC'
SET @strTemp = '<(SELECT min'
END
ELSE
BEGIN
SET @strOrderType = ' ORDER BY '+@ascColumn+' ASC'
SET @strTemp = '>(SELECT max'
END
IF @currPage = 1 -- 如果是第一页
BEGIN
IF @strCondition != ''
SET @strSql = 'SELECT TOP '+STR(@pageSize)+' '+@showColumn+' FROM '+@tabName+
' WHERE '+@strCondition+@strOrderType
ELSE
SET @strSql = 'SELECT TOP '+STR(@pageSize)+' '+@showColumn+' FROM '+@tabName+@strOrderType
END
ELSE -- 其他页
BEGIN
IF @strCondition !=''
SET @strSql = 'SELECT TOP '+STR(@pageSize)+' '+@showColumn+' FROM '+@tabName+
' WHERE '+@strCondition+' AND '+@pkColumn+@strTemp+'('+@pkColumn+')'+' FROM (SELECT TOP '+STR((@currPage-1)*@pageSize)+
' '+@pkColumn+' FROM '+@tabName+@strOrderType+') AS TabTemp)'+@strOrderType
ELSE
SET @strSql = 'SELECT TOP '+STR(@pageSize)+' '+@showColumn+' FROM '+@tabName+
' WHERE '+@pkColumn+@strTemp+'('+@pkColumn+')'+' FROM (SELECT TOP '+STR((@currPage-1)*@pageSize)+' '+@pkColumn+
' FROM '+@tabName+@strOrderType+') AS TabTemp)'+@strOrderType
END
END
PRINT(@strSql);
EXEC (@strSql);
END
(2)Ajax处理
A 取得总页数
Total.aspx.cs
Code
string constr = "Data Source=.;Initial Catalog=Test;Integrated Security=True";
SqlConnection con = new SqlConnection(constr);
SqlCommand cmd = new SqlCommand("select count(*) from product", con);
con.Open();
object r = cmd.ExecuteScalar();
con.Close();
Response.Write(r.ToString());
B 取得某分页的数据
ajax.aspx.cs
Code
//..
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("");
sb.Append("");
sb.Append("" + dt.Rows[i][0].ToString() + " | ");
sb.Append("" + dt.Rows[i][1].ToString() + " | ");
sb.Append("" + dt.Rows[i][2].ToString() + " | ");
sb.Append("" + dt.Rows[i][3].ToString() + " | ");
//sb.Append("" + dt.Rows[i][4].ToString() + " | ");
sb.Append("
");
sb.Append("
");
}
}
Response.Write(sb.ToString());
(3)前台页面
引用jquery-1.3.js、引用 jquery.pager.js、引用Pager.css
html
Code
<link href="css/Pager.css" rel="stylesheet" type="text/css" />
<script src="Jscript/jquery-1.3.js" type="text/javascript">script>
<script src="Jscript/jquery.pager.js" type="text/javascript">script>
Code
<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>
效果图,样式很难看,但实现了效果。
阅读(2613) | 评论(0) | 转发(0) |