asp.net利用存儲過程和div+css實現分頁(類似于博客園首頁分頁)
2024-07-10 12:41:34
供稿：網友
首先聲明以下幾點：
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;
