Asp.net + jQuery + jQuery pager plugin + Sql Server 利用Ajax实现真正的无刷新分页浏览

来源：互联网发布：视频直播讲课软件编辑：程序博客网时间：2024/04/29 18:12

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)
)

分页存储过程

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

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

..
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

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>

效果图，样式很难看，但实现了效果。