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并改正... 
一、首先看下页面前台代码 
复制代码 代码如下:
 
<%@ 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> 
 
css没有用.css文件写是为了方便，呵呵…… 
二、再看下后台代码（因为我是用三层写的，所以我会把BLL层、DAL层以及Models层的代码也附上） 
web(显示)后台.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=>} 
else 
{ 
sb.Append("<li class=\"pre\"><a href=>} 
//页码数 
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=>} 
else 
{ 
sb.Append("<li><a href=>} 
} 
} 
else 
{ 
//判断是否是前7页 
if (pageindex > 0 && pageindex < 8) 
{ 
for (int i = 1; i < 9; i++) 
{ 
if (i == pageindex) 
{ 
sb.Append("<li><span><a href=>} 
else 
{ 
sb.Append("<li><a href=>} 
} 
sb.Append("<li class=\"point\">...</li>"); 
sb.Append("<li><a href=>sb.Append("<li><a href=>} 
else if (pageindex > 7 && pageindex < (pageNum - 6)) 
{ 
sb.Append("<li><a href=>sb.Append("<li><a href=>sb.Append("<li class=\"point\">...</li>"); 
sb.Append("<li><a href=>sb.Append("<li><a href=
上一个：asp.net 细说文件读写操作（读写锁）
下一个：ASP.NET也像WinForm程序一样运行的实现方法
更多图片编程知识: