asp.net利用存储过程和div+css实现分页(类似于博客园首页分页)

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

接着上一篇博客写，上一篇博客我讲了一下，怎么用aspnetpager.dll这个插件对服务器控件进行分页，今天与我大家分享一下“asp.net利用存储过程和div+css实现分页”（类似于博客园首页分页）

首先声明以下几点：

1、也许讲解有点初级，希望高手不要“喷”我，因为我知道并不是每一个人都是高手，我也怕高手们说我装13，小生不才；

2、如有什么不对的地方，还希望大家指出，一定虚心学习；

3、本文属于作者原创，尊重他人劳动成果，转载请注明作者，谢谢。

下面开讲：

　　首先说下思路，写一个存储过程，我也找了一个存储过程，不过不是我写的，出处：http://www.cnblogs.com/zhongweiv/archive/2011/10/31/JqueryPagination.html 这是一个通过jqurey+ajax实现无刷新分页的例子，应该也不错，因为有的时候要无刷新嘛，我用的存储过程就是从那里copy来的，但是我看了58.com还有一些其他的一些网站信息分页都不会通过无刷新的，所以我特地的写了一个有刷新的分页的方法，好了，先写一个存储过程，然后就是通过div+css来布局点页码传到该页面的参数的值了，思路是通过用StringBuilder类后台布局div以实现动态的页码，然后通过页码调用存储过程，得到相应的信息，最后就是一些细节了，不断的运行调试找出BUG并改正...

一、首先看下页面前台代码

Html

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

<!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>Tandy Tang有刷新分页...</title>
<style type="text/css">
/*分页部分 start*/
        ul
{
            margin:0px;
            padding:0px;
}
        .page
{
            width:700px;
            background-color:#ffffff;
            height:50px;
            margin-top:15px;
}
        .page ul li
{
            float:left;
            display:block;
            width:28px;
            height:23px;
            text-align:center;
            margin-left:1px;
            vertical-align:middle;
            border-style:solid;
            border-width:1px;
            border-color:#b1add0;
}
        .page ul li span
{
            display:block;
            width:28px;
            height:23px;
            background-color:#2d8da3;                      
}
        .page ul li span a
{
            color:#ffffff;            
}
        .page ul li a
{
            display:block;
            width:28px;
            height:19px;            
            text-decoration:none;
            color:#354c7e;
            font-size:12px;
            vertical-align:middle;
            padding-top:4px;
}
        .page ul li a:hover
{
            background-color:#2d8da3;
            display:block;
            width:28px;
            height:19px;            
}
        .page .point
{
            background-color:#ffffff;
            width:20px;
            height:24px;
            display:block;
            border-style:solid;
            border-width:0px;
            border-color:#ffffff;
}
        .page .pre
{
            width:48px;
            height:22px;
            display:block;
            text-align:center;
            border-style:solid;
            border-width:1px;
            border-color:#b1add0;
}
        .page .pre a:hover
{
            background-color:#2d8da3;
            display:block;
            width:48px;
            height:19px;            
}
        .page .next
{
            width:48px;
            height:22px;
            display:block;
            text-align:center;
            border-style:solid;
            border-width:1px;
            border-color:#b1add0;         
}
         .page .next a:hover
{
            background-color:#2d8da3;
            display:block;
            width:48px;
            height:19px;            
}

/*分页部分 end*/

/*内容部分 start*/
        .content
{
            width:700px;
            height:120px;
            border-style:solid;
            border-width:1px;
            border-color:#333333;
            margin-bottom:10px;
}
        .content_left
{
            width:98px;
            height:118px;
            border-style:solid;
            border-width:1px;
            border-color:#333333;
            float:left;
            font-size:12px;
}
        .content_right
{
            margin-left:10px;
            width:588px;
            height:118px;
            border-style:solid;
            border-width:1px;
            border-color:#0000ff;
            float:left;
}
/*内容部分 end*/        
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lbl1" runat="server"></asp:Label><!--放内容-->
<asp:Label ID="lbl2" runat="server"></asp:Label><!--放页码-->
</div>
</form>
</body>
</html>

二、再看下后台代码（因为我是用三层写的，所以我会把BLL层、DAL层以及Models层的代码也附上）

.cs代码：

.cs

       public static int pageCount = 0;//总数可以用Session保存，避免每次都要查询，影响速度
        public int pageindex;
protected void Page_Load(object sender, EventArgs e)
        {
if (!IsPostBack)
            {
//page页面索引，其他参数不变，默认从第一页开始
                JBLL.JManage manage = new JBLL.JManage();
                pageCount = Convert.ToInt32(manage.GetCount().Tables[0].Rows[0]["num"].ToString());

if (Request.QueryString["page"] == null)
                {
                    pageindex=1;
                }
else
                {
                    pageindex = Convert.ToInt32(Request.QueryString["page"].ToString());
                }
//加载信息和页面
                GetInfo(pageindex, 10);
                Paging(pageindex, 10);
            }
        }

/// <summary>
/// 加载数据
/// </summary>
        private void GetInfo(int pageindex, int size)
        {
string strall = "";
int count;
            List<JModels.JPerson> list = new JBLL.JManage().GetAllPerson(size, pageindex, "", out count);
            StringBuilder sb = new StringBuilder();
foreach (JModels.JPerson p in list)
            {
                sb.Append("<div class='content'><div class='content_left'>");
                sb.Append(p.Name);
                sb.Append("</div><div class='content_right'>");
                sb.Append(p.Id.ToString());
                sb.Append("</div></div>");
            }
            strall = sb.ToString();
            lbl1.Text = strall;
        }

private void Paging(int pageindex, int size)
        {
string strpage = "";
            StringBuilder sb = new StringBuilder();
            sb.Append("<div class=\"page\"><ul>");
//需要判断是否启用
            if (pageindex == 1)
            {
                sb.Append("<li class=\"pre\" style=\"display:none\"><a href=\"Page.aspx?page=" + (pageindex - 1) + "\">&lt;&lt;Prev</a></li>");
            }
else
            {
                sb.Append("<li class=\"pre\"><a href=\"Page.aspx?page=" + (pageindex - 1) + "\">&lt;&lt;Prev</a></li>");
            }            
//页码数
            int pageNum;
if (pageCount % size == 0)
            {
                pageNum = pageCount / size;
            }
else
            {
                pageNum = pageCount / size + 1;
            }
if (pageNum < 11)
            {
for (int i = 1; i <= pageNum; i++)
                {
if (i == pageindex)
                    {
                        sb.Append("<li><span><a href=\"Page.aspx?page=" + i + "\">" + i + "</a></span></li>");
                    }
else
                    {
                        sb.Append("<li><a href=\"Page.aspx?page=" + i + "\">" + i + "</a></li>");
                    }
                }
            }
else
            {
//判断是否是前7页
                if (pageindex > 0 && pageindex < 8)
                {
for (int i = 1; i < 9; i++)
                    {
if (i == pageindex)
                        {
                            sb.Append("<li><span><a href=\"Page.aspx?page=" + i + "\">" + i + "</a></span></li>");
                        }
else
                        {
                            sb.Append("<li><a href=\"Page.aspx?page=" + i + "\">" + i + "</a></li>");
                        }
                    }
                    sb.Append("<li class=\"point\">...</li>");
                    sb.Append("<li><a href=\"Page.aspx?page=" + (pageNum - 1) + "\">" + (pageNum - 1) + "</a></li>");
                    sb.Append("<li><a href=\"Page.aspx?page=" + (pageNum) + "\">" + (pageNum) + "</a></li>");
                }
else if (pageindex > 7 && pageindex < (pageNum - 6))
                {
                    sb.Append("<li><a href=\"Page.aspx?page=1\">1</a></li>");
                    sb.Append("<li><a href=\"Page.aspx?page=2\">2</a></li>");
                    sb.Append("<li class=\"point\">...</li>");
                    sb.Append("<li><a href=\"Page.aspx?page=" + (pageindex - 3) + "\">" + (pageindex - 3) + "</a></li>");
                    sb.Append("<li><a href=\"Page.aspx?page=" + (pageindex - 2) + "\">" + (pageindex - 2) + "</a></li>");
                    sb.Append("<li><a href=\"Page.aspx?page=" + (pageindex - 1) + "\">" + (pageindex - 1) + "</a></li>");
                    sb.Append("<li><span><a href=\"Page.aspx?page=" + pageindex + "\">" + pageindex + "</a></span></li>");
                    sb.Append("<li><a href=\"Page.aspx?page=" + (pageindex + 1) + "\">" + (pageindex + 1) + "</a></li>");
                    sb.Append("<li><a href=\"Pa