A股上市公司传智教育（股票代码 003032）旗下技术交流社区北京昌平校区

传智教育官网黑马程序员官网

 找回密码
 加入黑马

QQ登录

只需一步，快速开始

论坛首页 › 隐藏归类 › 黑马那些年 › 第5届ASP.Net+Unity3D技术交流区 › 正文

ASP.NET利用存储过程实现分页

© 郑昱曦 中级黑马   /  2012-11-5 09:04  /  800 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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

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

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Page.aspx.cs" Inherits="Jquery.Page"%>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5.     <title>Tandy Tang有刷新分页...</title>
  6.     <style type="text/css">
  7.         /*分页部分 start*/  
  8.         ul  
  9.         {  
  10.             margin:0px;  
  11.             padding:0px;  
  12.         }  
  13.         .page  
  14.         {  
  15.             width:700px;  
  16.             background-color:#ffffff;  
  17.             height:50px;  
  18.             margin-top:15px;  
  19.         }  
  20.         .page ul li  
  21.         {  
  22.             float:left;  
  23.             display:block;  
  24.             width:28px;  
  25.             height:23px;  
  26.             text-align:center;  
  27.             margin-left:1px;  
  28.             vertical-align:middle;  
  29.             border-style:solid;  
  30.             border-width:1px;  
  31.             border-color:#b1add0;  
  32.         }  
  33.         .page ul li span  
  34.         {  
  35.             display:block;  
  36.             width:28px;  
  37.             height:23px;  
  38.             background-color:#2d8da3;                        
  39.         }  
  40.         .page ul li span a  
  41.         {  
  42.             color:#ffffff;              
  43.         }  
  44.         .page ul li a  
  45.         {  
  46.             display:block;  
  47.             width:28px;  
  48.             height:19px;              
  49.             text-decoration:none;  
  50.             color:#354c7e;  
  51.             font-size:12px;  
  52.             vertical-align:middle;  
  53.             padding-top:4px;  
  54.         }  
  55.         .page ul li a:hover  
  56.         {  
  57.             background-color:#2d8da3;  
  58.             display:block;  
  59.             width:28px;  
  60.             height:19px;              
  61.         }  
  62.         .page .point  
  63.         {  
  64.             background-color:#ffffff;  
  65.             width:20px;  
  66.             height:24px;  
  67.             display:block;  
  68.             border-style:solid;  
  69.             border-width:0px;  
  70.             border-color:#ffffff;  
  71.         }  
  72.         .page .pre  
  73.         {  
  74.             width:48px;  
  75.             height:22px;  
  76.             display:block;  
  77.             text-align:center;  
  78.             border-style:solid;  
  79.             border-width:1px;  
  80.             border-color:#b1add0;  
  81.         }  
  82.         .page .pre a:hover  
  83.         {  
  84.             background-color:#2d8da3;  
  85.             display:block;  
  86.             width:48px;  
  87.             height:19px;              
  88.         }  
  89.         .page .next  
  90.         {  
  91.             width:48px;  
  92.             height:22px;  
  93.             display:block;  
  94.             text-align:center;  
  95.             border-style:solid;  
  96.             border-width:1px;  
  97.             border-color:#b1add0;           
  98.         }  
  99.          .page .next a:hover  
  100.         {  
  101.             background-color:#2d8da3;  
  102.             display:block;  
  103.             width:48px;  
  104.             height:19px;              
  105.         }  
  106.          
  107.         /*分页部分 end*/  
  108.          
  109.         /*内容部分 start*/  
  110.         .content  
  111.         {  
  112.             width:700px;  
  113.             height:120px;  
  114.             border-style:solid;  
  115.             border-width:1px;  
  116.             border-color:#333333;  
  117.             margin-bottom:10px;  
  118.         }  
  119.         .content_left  
  120.         {  
  121.             width:98px;  
  122.             height:118px;  
  123.             border-style:solid;  
  124.             border-width:1px;  
  125.             border-color:#333333;  
  126.             float:left;  
  127.             font-size:12px;  
  128.         }  
  129.         .content_right  
  130.         {  
  131.             margin-left:10px;  
  132.             width:588px;  
  133.             height:118px;  
  134.             border-style:solid;  
  135.             border-width:1px;  
  136.             border-color:#0000ff;  
  137.             float:left;  
  138.         }  
  139.         /*内容部分 end*/         
  140.     </style>
  141. </head>
  142. <body>
  143.     <form id="form1" runat="server">
  144.         <div>
  145.             <asp:Label ID="lbl1" runat="server"></asp:Label><!--放内容-->
  146.             <asp:Label ID="lbl2" runat="server"></asp:Label><!--放页码-->
  147.         </div>
  148.     </form>
  149. </body>
  150. </html>
复制代码

css没有用.css文件写是为了方便，呵呵……

存储过程应该写得很详细了...我就不解释了。这个存储过程的用处很多啊，如果想实现无刷新的分页的话也是可以用的，调用的方法基本一样，大家可以自己试试。

好吧，到这里代码也基本上完成了，我认为主要的还是思路问题，思路有了就好办了，代码如果哪里有误或者有哪些更好的解决方案，请告诉我啊，一定虚心学习哈。下面看下效果图吧！效果图如下：


评分

参与人数 1技术分 +1 收起 理由
宋天琪 + 1

查看全部评分

存储

0 个回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 加入黑马