首先说下思路,写一个存储过程,我也找了一个存储过程,不过不是我写的,出处: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文件写是为了方便,呵呵……
存储过程应该写得很详细了...我就不解释了。这个存储过程的用处很多啊,如果想实现无刷新的分页的话也是可以用的,调用的方法基本一样,大家可以自己试试。
好吧,到这里代码也基本上完成了,我认为主要的还是思路问题,思路有了就好办了,代码如果哪里有误或者有哪些更好的解决方案,请告诉我啊,一定虚心学习哈。下面看下效果图吧!效果图如下:
【编辑推荐】