先写一个存储过程,然后就是通过div+css来布局点页码传到该页面的参数的值了,思路是通过用StringBuilder类后台布局div以实现动态的页码,然后通过页码调用存储过程,得到相应的信息。
首先说下思路,写一个存储过程,也找了一个存储过程,不过不是写的,出处:http://www.cnblogs.com/zhongweiv/archive/2015/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文件写是为了方便,呵呵
存储过程应该写得很详细了...就不解释了。这个存储过程的用处很多啊,如果想实现无刷新的分页的话也是可以用的,调用的方法基本一样,大家可以自己试试。
好吧,到这里代码也基本上完成了,认为主要的还是思路问题,思路有了就好办了,代码如果哪里有误或者有哪些更好的解决方案,请告诉啊,一定虚心学习哈。下面看下效果图吧!效果图如下: