Asp.Net Web控件 （五）（可分页Repeater的使用）

最新推荐文章于 2022-09-01 09:30:39 发布
最新推荐文章于 2022-09-01 09:30:39 发布
阅读量197 收藏
点赞数
文章标签： javascript xhtml ui ViewUI
原文链接：http://www.cnblogs.com/huxj/archive/2010/05/01/1725788.html
版权

在上一节中的示例中使用url分页，使用也是非常简单。

这一节将讲述其他属性，包括如何使用postback分页。其实控件在默认情况下市使用postback分页的。

 

下面示例是使用postback分页：

image

cs的代码：

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
    {
        bindData(); 
    }
}

void bindData()
{
    PageRepeater1.FromSection = DbSession.Default.From<Products>().OrderBy(Products._.ProductID.Asc);
    PageRepeater1.DataBind();
}


protected void PageRepeater1_PageChanged(object sender, EventArgs e)
{
    bindData();
}

运行效果如下:

image

PageIndexBox属性设置快速转到页码。

分别为TextBox, DropDownList, None 。 从字面上就很好理解啦，默认为None。

我们修改PageIndexBox为DropDownList，预览效果如下:

image

生成的html如下:



<!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><title>

</title><link href='/WebResource.axd?d=vyU7gXWTEjSzLLEcs_n47WXVuPaV-E2N-8HjlftGlnjKaeg4_XVFY_fcyrmwbmg50&t=634083463317010000' rel='stylesheet' type='text/css' /></head>
<body>
<form name="aspnetform" method="post" action="aspnetpagerTest.aspx?ikh" id="aspnetform">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNjA3NTQyNzk1ZGQHs1ugqd1jcS7qYWuTP5YeVk7Hwg==" />
</div>


<script src="/WebResource.axd?d=vyU7gXWTEjSzLLEcs_n47cqYai2q0UiRlFab244yTX18nd9uPcCHeGjTd5bAA7NJ0&amp;t=634083463317010000" type="text/javascript"></script>
   1:  
   2: <div>
   3:  
   4:     <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
   5:     <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
   6: </div>
   7:     
   8:             <table style="border-collapse: collapse" border="1" cellspacing="0" bordercolor="#000000"
   9:                 cellpadding="0" width="100%">
  10:                 <thead>
  11:                     <tr>
  12:                         <th>
  13:                             产品ID
  14:                         </th>
  15:                         <th>
  16:                             产品名称
  17:                         </th>
  18:                         <th>
  19:                             UnitPrice
  20:                         </th>
  21:                         <th>
  22:                             SupplierID
  23:                         </th>
  24:                         <th>
  25:                             ReorderLevel
  26:                         </th>
  27:                     </tr>
  28:                 </thead>
  29:                 <tbody>
  30:         
  31:             <tr>
  32:                 <td>
  33:                     46
  34:                 </td>
  35:                 <td>
  36:                     Spegesild
  37:                 </td>
  38:                 <td>
  39:                     12.0000
  40:                 </td>
  41:                 <td>
  42:                     21
  43:                 </td>
  44:                 <td>
  45:                     0
  46:                 </td>
  47:             </tr>
  48:         
  49:             <tr>
  50:                 <td>
  51:                     47
  52:                 </td>
  53:                 <td>
  54:                     Zaanse koeken
  55:                 </td>
  56:                 <td>
  57:                     9.5000
  58:                 </td>
  59:                 <td>
  60:                     22
  61:                 </td>
  62:                 <td>
  63:                     0
  64:                 </td>
  65:             </tr>
  66:         
  67:             <tr>
  68:                 <td>
  69:                     48
  70:                 </td>
  71:                 <td>
  72:                     Chocolade
  73:                 </td>
  74:                 <td>
  75:                     12.7500
  76:                 </td>
  77:                 <td>
  78:                     22
  79:                 </td>
  80:                 <td>
  81:                     25
  82:                 </td>
  83:             </tr>
  84:         
  85:             <tr>
  86:                 <td>
  87:                     49
  88:                 </td>
  89:                 <td>
  90:                     Maxilaku
  91:                 </td>
  92:                 <td>
  93:                     20.0000
  94:                 </td>
  95:                 <td>
  96:                     23
  97:                 </td>
  98:                 <td>
  99:                     15
 100:                 </td>
 101:             </tr>
 102:         
 103:             <tr>
 104:                 <td>
 105:                     50
 106:                 </td>
 107:                 <td>
 108:                     Valkoinen suklaa
 109:                 </td>
 110:                 <td>
 111:                     16.2500
 112:                 </td>
 113:                 <td>
 114:                     23
 115:                 </td>
 116:                 <td>
 117:                     30
 118:                 </td>
 119:             </tr>
 120:         
 121:             </tbody></table>
 122:         <div class="yellow" id="PageRepeater1div" style="text-align:right;">
 123:     第10/17页，每页5条，共81条  &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:__doPostBack('PageRepeater1','1')"><<</a><a href="javascript:__doPostBack('PageRepeater1','9')"><</a><a href="javascript:__doPostBack('PageRepeater1','1')">1</a><a href="javascript:__doPostBack('PageRepeater1','2')">2</a><a href="javascript:__doPostBack('PageRepeater1','3')">3</a><a href="javascript:__doPostBack('PageRepeater1','4')">4</a><a href="javascript:__doPostBack('PageRepeater1','5')">5</a><a href="javascript:__doPostBack('PageRepeater1','6')">6</a><a href="javascript:__doPostBack('PageRepeater1','7')">7</a><a href="javascript:__doPostBack('PageRepeater1','8')">8</a><a href="javascript:__doPostBack('PageRepeater1','9')">9</a><span style="font-weight:Bold;color:red;">10</span><a href="javascript:__doPostBack('PageRepeater1','11')">...</a><a href="javascript:__doPostBack('PageRepeater1','11')">></a><a href="javascript:__doPostBack('PageRepeater1','17')">>></a> 转到第<select id="PageRepeater1_input" name="PageRepeater1_input" οnchange="javascript:__doPostBack('PageRepeater1','')">
 124:         <option value="1">
 125:             1
 126:         </option><option value="2">
 127:             2
 128:         </option><option value="3">
 129:             3
 130:         </option><option value="4">
 131:             4
 132:         </option><option value="5">
 133:             5
 134:         </option><option value="6">
 135:             6
 136:         </option><option value="7">
 137:             7
 138:         </option><option value="8">
 139:             8
 140:         </option><option value="9">
 141:             9
 142:         </option><option value="10" selected="true">
 143:             10
 144:         </option><option value="11">
 145:             11
 146:         </option><option value="12">
 147:             12
 148:         </option><option value="13">
 149:             13
 150:         </option><option value="14">
 151:             14
 152:         </option><option value="15">
 153:             15
 154:         </option><option value="16">
 155:             16
 156:         </option><option value="17">
 157:             17
 158:         </option>
 159:     </select>页
 160: </div>
 161:     
 162: <script type="text/javascript">
 163: //<![CDATA[
 164: var theForm = document.forms['aspnetform'];
 165: if (!theForm) {
 166:     theForm = document.aspnetform;
 167: }
 168: function __doPostBack(eventTarget, eventArgument) {
 169:     if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
 170:         theForm.__EVENTTARGET.value = eventTarget;
 171:         theForm.__EVENTARGUMENT.value = eventArgument;
 172:         theForm.submit();
 173:     }
 174: }
 175: //]]>
</ script >

</ form >
</ body >
</ html >

 

使用psotback分页这里控件有两个事件可使用，在上面的代码中使用了OnPageChanged事件，还有一个是分页前的事件OnPageChanging。

那使用OnPageChanging事件的代码又该如何写呢，如下：

protected void PageRepeater1_PageChanging(object sender, Hxj.Web.UI.PageChangingEventArgs e)
{
    PageRepeater1.CurrentPageIndex = e.NewPageIndex;
    bindData();
}
写法也是很简单。

 

控件的UrlPaging属性是设置是否使用url分页。具体使用参考上一节。

可以使用样式修改分页的样式。这里贴一下来自网上的css：（其实控件的默认样式也是其中的一种） 

/*CSS Digg style pagination*/

DIV.digg {
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.digg A {
    BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none
}
DIV.digg A:hover {
    BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
}
DIV.digg A:active {
    BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
}
DIV.digg SPAN.current {
    BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #000099
}
DIV.digg SPAN.disabled {
    BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}




/*CSS yahoo style pagination*/

DIV.yahoo {
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.yahoo A {
    BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #fff 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #fff 1px solid; TEXT-DECORATION: underline
}
DIV.yahoo A:hover {
    BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
}
DIV.yahoo A:active {
    BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #f00; BORDER-BOTTOM: #000099 1px solid
}
DIV.yahoo SPAN.current {
    BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #fff 1px solid; COLOR: #000; PADDING-TOP: 2px; BORDER-BOTTOM: #fff 1px solid; BACKGROUND-COLOR: #fff
}
DIV.yahoo SPAN.disabled {
    BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}



/*CSS meneame style pagination*/

DIV.meneame {
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-SIZE: 80%; PADDING-BOTTOM: 3px; MARGIN: 3px; COLOR: #ff6500; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.meneame A {
    BORDER-RIGHT: #ff9600 1px solid; PADDING-RIGHT: 7px; BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #ff9600 1px solid; PADDING-LEFT: 7px; BACKGROUND-IMAGE: url(meneame.jpg); PADDING-BOTTOM: 5px; BORDER-LEFT: #ff9600 1px solid; COLOR: #ff6500; MARGIN-RIGHT: 3px; PADDING-TOP: 5px; BORDER-BOTTOM: #ff9600 1px solid; TEXT-DECORATION: none
}
DIV.meneame A:hover {
    BORDER-RIGHT: #ff9600 1px solid; BORDER-TOP: #ff9600 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #ff9600 1px solid; COLOR: #ff6500; BORDER-BOTTOM: #ff9600 1px solid; BACKGROUND-COLOR: #ffc794
}
DIV.meneame A:active {
    BORDER-RIGHT: #ff9600 1px solid; BORDER-TOP: #ff9600 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #ff9600 1px solid; COLOR: #ff6500; BORDER-BOTTOM: #ff9600 1px solid; BACKGROUND-COLOR: #ffc794
}
DIV.meneame SPAN.current {
    BORDER-RIGHT: #ff6500 1px solid; PADDING-RIGHT: 7px; BORDER-TOP: #ff6500 1px solid; PADDING-LEFT: 7px; FONT-WEIGHT: bold; PADDING-BOTTOM: 5px; BORDER-LEFT: #ff6500 1px solid; COLOR: #ff6500; MARGIN-RIGHT: 3px; PADDING-TOP: 5px; BORDER-BOTTOM: #ff6500 1px solid; BACKGROUND-COLOR: #ffbe94
}
DIV.meneame SPAN.disabled {
    BORDER-RIGHT: #ffe3c6 1px solid; PADDING-RIGHT: 7px; BORDER-TOP: #ffe3c6 1px solid; PADDING-LEFT: 7px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffe3c6 1px solid; COLOR: #ffe3c6; MARGIN-RIGHT: 3px; PADDING-TOP: 5px; BORDER-BOTTOM: #ffe3c6 1px solid
}



/*CSS flickr style pagination*/

DIV.flickr {
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.flickr A {
    BORDER-RIGHT: #dedfde 1px solid; PADDING-RIGHT: 6px; BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #dedfde 1px solid; PADDING-LEFT: 6px; PADDING-BOTTOM: 2px; BORDER-LEFT: #dedfde 1px solid; COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; BORDER-BOTTOM: #dedfde 1px solid; TEXT-DECORATION: none
}
DIV.flickr A:hover {
    BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #000 1px solid; COLOR: #fff; BORDER-BOTTOM: #000 1px solid; BACKGROUND-COLOR: #0061de
}
DIV.meneame A:active {
    BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #000 1px solid; COLOR: #fff; BORDER-BOTTOM: #000 1px solid; BACKGROUND-COLOR: #0061de
}
DIV.flickr SPAN.current {
    PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; COLOR: #ff0084; MARGIN-RIGHT: 3px; PADDING-TOP: 2px
}
DIV.flickr SPAN.disabled {
    PADDING-RIGHT: 6px; PADDING-LEFT: 6px; PADDING-BOTTOM: 2px; COLOR: #adaaad; MARGIN-RIGHT: 3px; PADDING-TOP: 2px
}



/*CSS sabrosus style pagination*/

DIV.sabrosus {
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.sabrosus A {
    BORDER-RIGHT: #9aafe5 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #9aafe5 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #9aafe5 1px solid; COLOR: #2e6ab1; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #9aafe5 1px solid; TEXT-DECORATION: none
}
DIV.sabrosus A:hover {
    BORDER-RIGHT: #2b66a5 1px solid; BORDER-TOP: #2b66a5 1px solid; BORDER-LEFT: #2b66a5 1px solid; COLOR: #000; BORDER-BOTTOM: #2b66a5 1px solid; BACKGROUND-COLOR: lightyellow
}
DIV.pagination A:active {
    BORDER-RIGHT: #2b66a5 1px solid; BORDER-TOP: #2b66a5 1px solid; BORDER-LEFT: #2b66a5 1px solid; COLOR: #000; BORDER-BOTTOM: #2b66a5 1px solid; BACKGROUND-COLOR: lightyellow
}
DIV.sabrosus SPAN.current {
    BORDER-RIGHT: navy 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: navy 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; BORDER-LEFT: navy 1px solid; COLOR: #fff; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: navy 1px solid; BACKGROUND-COLOR: #2e6ab1
}
DIV.sabrosus SPAN.disabled {
    BORDER-RIGHT: #929292 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #929292 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #929292 1px solid; COLOR: #929292; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #929292 1px solid
}



/*CSS scott style pagination*/

DIV.scott {
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.scott A {
    BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ddd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #ddd 1px solid; COLOR: #88af3f; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #ddd 1px solid; TEXT-DECORATION: none
}
DIV.scott A:hover {
    BORDER-RIGHT: #85bd1e 1px solid; BORDER-TOP: #85bd1e 1px solid; BORDER-LEFT: #85bd1e 1px solid; COLOR: #638425; BORDER-BOTTOM: #85bd1e 1px solid; BACKGROUND-COLOR: #f1ffd6
}
DIV.scott A:active {
    BORDER-RIGHT: #85bd1e 1px solid; BORDER-TOP: #85bd1e 1px solid; BORDER-LEFT: #85bd1e 1px solid; COLOR: #638425; BORDER-BOTTOM: #85bd1e 1px solid; BACKGROUND-COLOR: #f1ffd6
}
DIV.scott SPAN.current {
    BORDER-RIGHT: #b2e05d 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #b2e05d 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; BORDER-LEFT: #b2e05d 1px solid; COLOR: #fff; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #b2e05d 1px solid; BACKGROUND-COLOR: #b2e05d
}
DIV.scott SPAN.disabled {
    BORDER-RIGHT: #f3f3f3 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #f3f3f3 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #f3f3f3 1px solid; COLOR: #ccc; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #f3f3f3 1px solid
}



/*CSS quotes style pagination*/

DIV.quotes {
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.quotes A {
    BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ddd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #ddd 1px solid; COLOR: #aaa; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #ddd 1px solid; TEXT-DECORATION: none
}
DIV.quotes A:hover {
    BORDER-RIGHT: #a0a0a0 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #a0a0a0 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #a0a0a0 1px solid; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #a0a0a0 1px solid
}
DIV.quotes A:active {
    BORDER-RIGHT: #a0a0a0 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #a0a0a0 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #a0a0a0 1px solid; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #a0a0a0 1px solid
}
DIV.quotes SPAN.current {
    BORDER-RIGHT: #e0e0e0 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #e0e0e0 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; BORDER-LEFT: #e0e0e0 1px solid; COLOR: #aaa; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #e0e0e0 1px solid; BACKGROUND-COLOR: #f0f0f0
}
DIV.quotes SPAN.disabled {
    BORDER-RIGHT: #f3f3f3 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #f3f3f3 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #f3f3f3 1px solid; COLOR: #ccc; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #f3f3f3 1px solid
}



/*CSS black style pagination*/

DIV.black {
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-SIZE: 80%; PADDING-BOTTOM: 10px; MARGIN: 3px; COLOR: #a0a0a0; PADDING-TOP: 10px; BACKGROUND-COLOR: #000; TEXT-ALIGN: center
}
DIV.black A {
    BORDER-RIGHT: #909090 1px solid; PADDING-RIGHT: 5px; BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #909090 1px solid; PADDING-LEFT: 5px; BACKGROUND-IMAGE: url(bar.gif); PADDING-BOTTOM: 2px; BORDER-LEFT: #909090 1px solid; COLOR: #c0c0c0; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; BORDER-BOTTOM: #909090 1px solid; TEXT-DECORATION: none
}
DIV.black A:hover {
    BORDER-RIGHT: #f0f0f0 1px solid; BORDER-TOP: #f0f0f0 1px solid; BACKGROUND-IMAGE: url(invbar.gif); BORDER-LEFT: #f0f0f0 1px solid; COLOR: #ffffff; BORDER-BOTTOM: #f0f0f0 1px solid; BACKGROUND-COLOR: #404040
}
DIV.black A:active {
    BORDER-RIGHT: #f0f0f0 1px solid; BORDER-TOP: #f0f0f0 1px solid; BACKGROUND-IMAGE: url(invbar.gif); BORDER-LEFT: #f0f0f0 1px solid; COLOR: #ffffff; BORDER-BOTTOM: #f0f0f0 1px solid; BACKGROUND-COLOR: #404040
}
DIV.black SPAN.current {
    BORDER-RIGHT: #ffffff 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; BORDER-LEFT: #ffffff 1px solid; COLOR: #ffffff; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; BORDER-BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: #606060
}
DIV.black SPAN.disabled {
    BORDER-RIGHT: #606060 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #606060 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #606060 1px solid; COLOR: #808080; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; BORDER-BOTTOM: #606060 1px solid
}




/*CSS black2 style pagination*/

DIV.black2 {
    PADDING-RIGHT: 7px; PADDING-LEFT: 7px; PADDING-BOTTOM: 7px; MARGIN: 3px; PADDING-TOP: 7px; TEXT-ALIGN: center
}
DIV.black2 A {
    BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000000 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000000 1px solid; COLOR: #000000; PADDING-TOP: 2px; BORDER-BOTTOM: #000000 1px solid; TEXT-DECORATION: none
}
DIV.black2 A:hover {
    BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; COLOR: #fff; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #000
}
DIV.black2 A:active {
    BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; COLOR: #fff; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #000
}
DIV.black2 SPAN.current {
    BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000000 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000000 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #000000
}
DIV.black2 SPAN.disabled {
    BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}




/*CSS black-red style pagination*/

DIV.black-red {
    FONT-SIZE: 11px; COLOR: #fff; FONT-FAMILY: Tahoma, Arial, Helvetica, Sans-serif; BACKGROUND-COLOR: #3e3e3e
}
DIV.black-red A {
    PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; COLOR: #fff; PADDING-TOP: 2px; BACKGROUND-COLOR: #3e3e3e; TEXT-DECORATION: none
}
DIV.black-red A:hover {
    COLOR: #fff; BACKGROUND-COLOR: #ec5210
}
DIV.black-red A:active {
    COLOR: #fff; BACKGROUND-COLOR: #ec5210
}
DIV.black-red SPAN.current {
    PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; COLOR: #fff; PADDING-TOP: 2px; BACKGROUND-COLOR: #313131
}
DIV.black-red SPAN.disabled {
    PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; COLOR: #868686; PADDING-TOP: 2px; BACKGROUND-COLOR: #3e3e3e
}




/*CSS grayr style pagination*/

DIV.grayr {
    PADDING-RIGHT: 2px; PADDING-LEFT: 2px; FONT-SIZE: 11px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-FAMILY: Tahoma, Arial, Helvetica, Sans-serif; BACKGROUND-COLOR: #c1c1c1
}
DIV.grayr A {
    PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; COLOR: #000; PADDING-TOP: 2px; BACKGROUND-COLOR: #c1c1c1; TEXT-DECORATION: none
}
DIV.grayr A:hover {
    COLOR: #000; BACKGROUND-COLOR: #99ffff
}
DIV.grayr A:active {
    COLOR: #000; BACKGROUND-COLOR: #99ffff
}
DIV.grayr SPAN.current {
    PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; COLOR: #303030; PADDING-TOP: 2px; BACKGROUND-COLOR: #fff
}
DIV.grayr SPAN.disabled {
    PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; COLOR: #797979; PADDING-TOP: 2px; BACKGROUND-COLOR: #c1c1c1
}




/*CSS yellow style pagination*/

DIV.yellow {
    PADDING-RIGHT: 7px; PADDING-LEFT: 7px; PADDING-BOTTOM: 7px; MARGIN: 3px; PADDING-TOP: 7px; TEXT-ALIGN: center
}
DIV.yellow A {
    BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #ccc 1px solid; COLOR: #000; PADDING-TOP: 2px; BORDER-BOTTOM: #ccc 1px solid; TEXT-DECORATION: none
}
DIV.yellow A:hover {
    BORDER-RIGHT: #f0f0f0 1px solid; BORDER-TOP: #f0f0f0 1px solid; BORDER-LEFT: #f0f0f0 1px solid; COLOR: #000; BORDER-BOTTOM: #f0f0f0 1px solid
}
DIV.yellow A:active {
    BORDER-RIGHT: #f0f0f0 1px solid; BORDER-TOP: #f0f0f0 1px solid; BORDER-LEFT: #f0f0f0 1px solid; COLOR: #000; BORDER-BOTTOM: #f0f0f0 1px solid
}
DIV.yellow SPAN.current {
    BORDER-RIGHT: #d9d300 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #d9d300 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #d9d300 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #d9d300 1px solid; BACKGROUND-COLOR: #d9d300
}
DIV.yellow SPAN.disabled {
    BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}



/*CSS jogger style pagination*/

DIV.jogger {
    PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 7px; PADDING-TOP: 2px; FONT-FAMILY: "Lucida Sans Unicode", "Lucida Grande", LucidaGrande, "Lucida Sans", Geneva, Verdana, sans-serif
}
DIV.jogger A {
    PADDING-RIGHT: 0.64em; PADDING-LEFT: 0.64em; PADDING-BOTTOM: 0.43em; MARGIN: 2px; COLOR: #fff; PADDING-TOP: 0.5em; BACKGROUND-COLOR: #ee4e4e; TEXT-DECORATION: none
}
DIV.jogger A:hover {
    PADDING-RIGHT: 0.64em; PADDING-LEFT: 0.64em; PADDING-BOTTOM: 0.43em; MARGIN: 2px; COLOR: #fff; PADDING-TOP: 0.5em; BACKGROUND-COLOR: #de1818
}
DIV.jogger A:active {
    PADDING-RIGHT: 0.64em; PADDING-LEFT: 0.64em; PADDING-BOTTOM: 0.43em; MARGIN: 2px; COLOR: #fff; PADDING-TOP: 0.5em; BACKGROUND-COLOR: #de1818
}
DIV.jogger SPAN.current {
    PADDING-RIGHT: 0.64em; PADDING-LEFT: 0.64em; PADDING-BOTTOM: 0.43em; MARGIN: 2px; COLOR: #6d643c; PADDING-TOP: 0.5em; BACKGROUND-COLOR: #f6efcc
}
DIV.jogger SPAN.disabled {
    DISPLAY: none
}



/*CSS starcraft2 style pagination*/

DIV.starcraft2 {
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-WEIGHT: bold; FONT-SIZE: 13.5pt; PADDING-BOTTOM: 3px; MARGIN: 3px; COLOR: #fff; PADDING-TOP: 3px; FONT-FAMILY: Arial; BACKGROUND-COLOR: #000; TEXT-ALIGN: center
}
DIV.starcraft2 A {
    MARGIN: 2px; COLOR: #fa0; BACKGROUND-COLOR: #000; TEXT-DECORATION: none
}
DIV.starcraft2 A:hover {
    COLOR: #fff; BACKGROUND-COLOR: #000
}
DIV.starcraft2 A:active {
    COLOR: #fff; BACKGROUND-COLOR: #000
}
DIV.starcraft2 SPAN.current {
    FONT-WEIGHT: bold; MARGIN: 2px; COLOR: #fff; BACKGROUND-COLOR: #000
}
DIV.starcraft2 SPAN.disabled {
    MARGIN: 2px; COLOR: #444; BACKGROUND-COLOR: #000
}



/*CSS tres style pagination*/

DIV.tres {
    PADDING-RIGHT: 7px; PADDING-LEFT: 7px; FONT-WEIGHT: bold; FONT-SIZE: 13.2pt; PADDING-BOTTOM: 7px; MARGIN: 3px; PADDING-TOP: 7px; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-ALIGN: center
}
DIV.tres A {
    BORDER-RIGHT: #d9d300 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #d9d300 2px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #d9d300 2px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #d9d300 2px solid; BACKGROUND-COLOR: #d90; TEXT-DECORATION: none
}
DIV.tres A:hover {
    BORDER-RIGHT: #ff0 2px solid; BORDER-TOP: #ff0 2px solid; BORDER-LEFT: #ff0 2px solid; COLOR: #000; BORDER-BOTTOM: #ff0 2px solid; BACKGROUND-COLOR: #ff0
}
DIV.tres A:active {
    BORDER-RIGHT: #ff0 2px solid; BORDER-TOP: #ff0 2px solid; BORDER-LEFT: #ff0 2px solid; COLOR: #000; BORDER-BOTTOM: #ff0 2px solid; BACKGROUND-COLOR: #ff0
}
DIV.tres SPAN.current {
    BORDER-RIGHT: #fff 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #fff 2px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #fff 2px solid; COLOR: #000; PADDING-TOP: 2px; BORDER-BOTTOM: #fff 2px solid
}
DIV.tres SPAN.disabled {
    DISPLAY: none
}



/*CSS megas512 style pagination*/

DIV.megas512 {
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.megas512 A {
    BORDER-RIGHT: #dedfde 1px solid; PADDING-RIGHT: 6px; BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #dedfde 1px solid; PADDING-LEFT: 6px; PADDING-BOTTOM: 2px; BORDER-LEFT: #dedfde 1px solid; COLOR: #99210b; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; BORDER-BOTTOM: #dedfde 1px solid; TEXT-DECORATION: none
}
DIV.megas512 A:hover {
    BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #000 1px solid; COLOR: #fff; BORDER-BOTTOM: #000 1px solid; BACKGROUND-COLOR: #777777
}
DIV.megas512 A:active {
    BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #000 1px solid; COLOR: #fff; BORDER-BOTTOM: #000 1px solid; BACKGROUND-COLOR: #777777
}
DIV.megas512 SPAN.current {
    PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; COLOR: #99210b; MARGIN-RIGHT: 3px; PADDING-TOP: 2px
}
DIV.megas512 SPAN.disabled {
    PADDING-RIGHT: 6px; PADDING-LEFT: 6px; PADDING-BOTTOM: 2px; COLOR: #adaaad; MARGIN-RIGHT: 3px; PADDING-TOP: 2px
}



/*CSS technorati style pagination*/

DIV.technorati {
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.technorati A {
    BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 6px; BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 6px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; BORDER-LEFT: #ccc 1px solid; COLOR: #4261de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; BORDER-BOTTOM: #ccc 1px solid; TEXT-DECORATION: none
}
DIV.technorati A:hover {
    BACKGROUND-IMAGE: none; COLOR: #fff; BACKGROUND-COLOR: #4261df
}
DIV.technorati A:active {
    BACKGROUND-IMAGE: none; COLOR: #fff; BACKGROUND-COLOR: #4261df
}
DIV.technorati SPAN.current {
    PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; COLOR: #000; MARGIN-RIGHT: 3px; PADDING-TOP: 2px
}
DIV.technorati SPAN.disabled {
    DISPLAY: none
}



/*CSS youtube style pagination*/

DIV.youtube {
    PADDING-RIGHT: 6px; BORDER-TOP: #9c9a9c 1px dotted; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; COLOR: #313031; PADDING-TOP: 4px; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #cecfce; TEXT-ALIGN: right
}
DIV.youtube A {
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-WEIGHT: bold; PADDING-BOTTOM: 1px; MARGIN: 0px 1px; COLOR: #0030ce; PADDING-TOP: 1px; TEXT-DECORATION: underline
}
DIV.youtube A:hover {

}
DIV.youtube A:active {

}
DIV.youtube SPAN.current {
    PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 1px; COLOR: #000; PADDING-TOP: 1px; BACKGROUND-COLOR: #fff
}
DIV.youtube SPAN.disabled {
    DISPLAY: none
}




/*CSS msdn style pagination*/

DIV.msdn {
    PADDING-RIGHT: 6px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; COLOR: #313031; PADDING-TOP: 4px; FONT-FAMILY: Verdana,Tahoma,Arial,Helvetica,Sans-Serif; BACKGROUND-COLOR: #fff; TEXT-ALIGN: right
}
DIV.msdn A {
    BORDER-RIGHT: #b7d8ee 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #b7d8ee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 4px; MARGIN: 0px 3px; BORDER-LEFT: #b7d8ee 1px solid; COLOR: #0030ce; PADDING-TOP: 5px; BORDER-BOTTOM: #b7d8ee 1px solid; TEXT-DECORATION: none
}
DIV.msdn A:hover {
    BORDER-RIGHT: #b7d8ee 1px solid; BORDER-TOP: #b7d8ee 1px solid; BORDER-LEFT: #b7d8ee 1px solid; COLOR: #0066a7; BORDER-BOTTOM: #b7d8ee 1px solid; BACKGROUND-COLOR: #d2eaf6
}
DIV.pagination A:active {
    BORDER-RIGHT: #b7d8ee 1px solid; BORDER-TOP: #b7d8ee 1px solid; BORDER-LEFT: #b7d8ee 1px solid; COLOR: #0066a7; BORDER-BOTTOM: #b7d8ee 1px solid; BACKGROUND-COLOR: #d2eaf6
}
DIV.msdn SPAN.current {
    BORDER-RIGHT: #b7d8ee 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #b7d8ee 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 4px; MARGIN: 0px 3px; BORDER-LEFT: #b7d8ee 1px solid; COLOR: #444444; PADDING-TOP: 5px; BORDER-BOTTOM: #b7d8ee 1px solid; BACKGROUND-COLOR: #d2eaf6
}
DIV.msdn SPAN.disabled {
    DISPLAY: none
}




/*CSS badoo style pagination*/

DIV.badoo {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 10px; COLOR: #48b9ef; PADDING-TOP: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #fff; TEXT-ALIGN: center
}
DIV.badoo A {
    BORDER-RIGHT: #f0f0f0 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #f0f0f0 2px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 0px 2px; BORDER-LEFT: #f0f0f0 2px solid; COLOR: #48b9ef; PADDING-TOP: 2px; BORDER-BOTTOM: #f0f0f0 2px solid; TEXT-DECORATION: none
}
DIV.badoo A:hover {
    BORDER-RIGHT: #ff5a00 2px solid; BORDER-TOP: #ff5a00 2px solid; BORDER-LEFT: #ff5a00 2px solid; COLOR: #ff5a00; BORDER-BOTTOM: #ff5a00 2px solid
}
DIV.badoo A:active {
    BORDER-RIGHT: #ff5a00 2px solid; BORDER-TOP: #ff5a00 2px solid; BORDER-LEFT: #ff5a00 2px solid; COLOR: #ff5a00; BORDER-BOTTOM: #ff5a00 2px solid
}
DIV.badoo SPAN.current {
    BORDER-RIGHT: #ff5a00 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ff5a00 2px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; BORDER-LEFT: #ff5a00 2px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #ff5a00 2px solid; BACKGROUND-COLOR: #ff6c16
}
DIV.badoo SPAN.disabled {
    DISPLAY: none
}





/*CSS manu style pagination*/

.manu {
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
.manu A {
    BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #036cb4; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid; TEXT-DECORATION: none
}
.manu A:hover {
    BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid
}
.manu A:active {
    BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid
}
.manu .current {
    BORDER-RIGHT: #036cb4 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #036cb4 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #036cb4 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #036cb4 1px solid; BACKGROUND-COLOR: #036cb4
}
.manu .disabled {
    BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}






/*CSS green-black style pagination*/

DIV.green-black {
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.green-black A {
    BORDER-RIGHT: #2c2c2c 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #2c2c2c 1px solid; PADDING-LEFT: 5px; BACKGROUND: url(image1.gif) #2c2c2c; PADDING-BOTTOM: 2px; BORDER-LEFT: #2c2c2c 1px solid; COLOR: #fff; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #2c2c2c 1px solid; TEXT-DECORATION: none
}
DIV.green-black A:hover {
    BORDER-RIGHT: #aad83e 1px solid; BORDER-TOP: #aad83e 1px solid; BACKGROUND: url(image2.gif) #aad83e; BORDER-LEFT: #aad83e 1px solid; COLOR: #fff; BORDER-BOTTOM: #aad83e 1px solid
}
DIV.green-black A:active {
    BORDER-RIGHT: #aad83e 1px solid; BORDER-TOP: #aad83e 1px solid; BACKGROUND: url(image2.gif) #aad83e; BORDER-LEFT: #aad83e 1px solid; COLOR: #fff; BORDER-BOTTOM: #aad83e 1px solid
}
DIV.green-black SPAN.current {
    BORDER-RIGHT: #aad83e 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aad83e 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; BACKGROUND: url(image2.gif) #aad83e; PADDING-BOTTOM: 2px; BORDER-LEFT: #aad83e 1px solid; COLOR: #fff; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #aad83e 1px solid
}
DIV.green-black SPAN.disabled {
    BORDER-RIGHT: #f3f3f3 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #f3f3f3 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #f3f3f3 1px solid; COLOR: #ccc; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #f3f3f3 1px solid
}






/*CSS viciao style pagination*/

DIV.viciao {
    MARGIN-TOP: 20px; MARGIN-BOTTOM: 10px
}
DIV.viciao A {
    BORDER-RIGHT: #8db5d7 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #8db5d7 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #8db5d7 1px solid; COLOR: #000; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #8db5d7 1px solid; TEXT-DECORATION: none
}
DIV.viciao A:hover {
    BORDER-RIGHT: red 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: red 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: red 1px solid; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: red 1px solid
}
DIV.viciao A:active {
    BORDER-RIGHT: red 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: red 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: red 1px solid; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: red 1px solid
}
DIV.viciao SPAN.current {
    BORDER-RIGHT: #e89954 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #e89954 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; BORDER-LEFT: #e89954 1px solid; COLOR: #000; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #e89954 1px solid; BACKGROUND-COLOR: #ffca7d
}
DIV.viciao SPAN.disabled {
    BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #ccc 1px solid; COLOR: #ccc; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #ccc 1px solid
}





/*CSS yahoo2 style pagination*/

DIV.yahoo2 {
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-SIZE: 0.85em; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; FONT-FAMILY: Tahoma,Helvetica,sans-serif; TEXT-ALIGN: center
}
DIV.yahoo2 A {
    BORDER-RIGHT: #ccdbe4 1px solid; PADDING-RIGHT: 8px; BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #ccdbe4 1px solid; PADDING-LEFT: 8px; PADDING-BOTTOM: 2px; BORDER-LEFT: #ccdbe4 1px solid; COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; BORDER-BOTTOM: #ccdbe4 1px solid; TEXT-DECORATION: none
}
DIV.yahoo2 A:hover {
    BORDER-RIGHT: #2b55af 1px solid; BORDER-TOP: #2b55af 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #2b55af 1px solid; COLOR: #fff; BORDER-BOTTOM: #2b55af 1px solid; BACKGROUND-COLOR: #3666d4
}
DIV.yahoo2 A:active {
    BORDER-RIGHT: #2b55af 1px solid; BORDER-TOP: #2b55af 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #2b55af 1px solid; COLOR: #fff; BORDER-BOTTOM: #2b55af 1px solid; BACKGROUND-COLOR: #3666d4
}
DIV.yahoo2 SPAN.current {
    PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; COLOR: #000; MARGIN-RIGHT: 3px; PADDING-TOP: 2px
}
DIV.yahoo2 SPAN.disabled {
    DISPLAY: none
}
DIV.yahoo2 A.next {
    BORDER-RIGHT: #ccdbe4 2px solid; BORDER-TOP: #ccdbe4 2px solid; MARGIN: 0px 0px 0px 10px; BORDER-LEFT: #ccdbe4 2px solid; BORDER-BOTTOM: #ccdbe4 2px solid
}
DIV.yahoo2 A.next:hover {
    BORDER-RIGHT: #2b55af 2px solid; BORDER-TOP: #2b55af 2px solid; BORDER-LEFT: #2b55af 2px solid; BORDER-BOTTOM: #2b55af 2px solid
}
DIV.yahoo2 A.prev {
    BORDER-RIGHT: #ccdbe4 2px solid; BORDER-TOP: #ccdbe4 2px solid; MARGIN: 0px 10px 0px 0px; BORDER-LEFT: #ccdbe4 2px solid; BORDER-BOTTOM: #ccdbe4 2px solid
}
DIV.yahoo2 A.prev:hover {
    BORDER-RIGHT: #2b55af 2px solid; BORDER-TOP: #2b55af 2px solid; BORDER-LEFT: #2b55af 2px solid; BORDER-BOTTOM: #2b55af 2px solid
}

 

这里有很多中样式，我们拿其中的两种来测试一下。

我们选第一个digg，设置属性PageCssClass="digg"，将上面的css引入页面，再看运行预览效果如下：

image

 

再来一个badoo，PageCssClass="badoo"，看预览效果：

image

大家也可选其他的样式试试，选自己喜欢的，当然也可以写自己的css来控制分页样式。

 

下载

转载于:https://www.cnblogs.com/huxj/archive/2010/05/01/1725788.html

akm84116
关注
ASP.NET Repeater分页，查询分页
07-23
ASP.NET Repeater分页，查询分页 ASP.NET Repeater分页，查询分页 ASP.NET Repeater分页，查询分页 ASP.NET Repeater分页，查询分页 ASP.NET Repeater分页，查询分页
asp.net下Repeater使用 AspNetPager分页控件
10-29
在ASP.NET开发中，分页是构建高效、用户体验良好的Web应用程序的关键功能之一。ASP.NET框架提供了多种内置控件，如DataGrid（在ASP.NET 1.1中）和GridView（在ASP.NET 2.0及以上版本），它们都具有分页功能。然而，...
ASP.NET程序中用Repeater实现分页
weixin_30747253的博客
01-24 317
一、程序功能：为Repeater实现分页 　　二、窗体设计： 　　1、新建ASP.NET Web应用程序，命名为Repeater2，保存路径为http://192.168.0.1/Repeater2（注：我机子上的网站的IP是192.168.0.1的主目录是D:\web文件夹）然后点击确定。 　　2、向窗体添加一个3行一列的表，向表的第一行中添加一个Repeater控...
ASP.NET（C#） Repeater分页的实现
weixin_30624825的博客
07-20 172
ASP.NET（C#） Repeater分页的实现 第一种方式： 数据库连接代码： using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System...
ASP.NET中Repeater控件实现分页功能
lllljz的专栏
04-10 1092
Repeater 轻量级,完全的自定义 Repeater分页，需要依靠PagedDataSource。这个类存在于System.Web.UI.WebControls命名空间。它的作用是作为数据源与数据显示控件的中间介质。如： 　　数据源－>PagedDataSource－>数据绑定控件 之间的关系通过以下代码来实现： 　　PagedDataSource p
ASP.NET中控件实现分页功能/Repeater控件分页
weixin_30875157的博客
05-06 216
//repeate.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="repeate.aspx.cs" Inherits="repeate" %> <%@ Import Namespace="System.Data" %> <!DOCTYPE html PUBLIC "-//...
asp.net Repeater控件的说明及详细介绍及使用方法
10-29
- 结合使用Repeater控件和分页控件，创建具有分页功能的数据列表。 - 注意Repeater控件中的事件处理，特别是在ItemDataBound事件中进行数据项的自定义处理。 综上所述，*** Repeater控件是实现自定义列表展示的一个...
.NET实现Repeater控件+AspNetPager控件分页
10-23
在.NET开发中，Repeater控件和AspNetPager控件是两个非常重要的组件，它们用于创建动态数据展示和分页功能。下面将详细解释这两个控件的使用方法和工作原理。 **Repeater控件** Repeater控件是ASP.NET中一个非常...
asp.net repeater手写分页实例代码
10-29
总结来说，本文通过一个具体的*** Repeater控件分页实例，介绍了分页功能实现的整个过程，包括数据绑定、分页逻辑处理、用户界面分页控制链接的生成，以及代码的组织和设计。通过理解这些知识点，开发者可以更好地在...
ASP.NET Repeater 分页
asdcc3057574754的博客
09-01 266
ASP.NET 如何用Repeater进行分页 ，话不多说，直接上代码。
asp.net Repeater分页实例(PageDataSource的使用)
01-01
Asp.net提供了三个功能强大的列表控件：DataGrid、DataList和Repeater控件，但其中只有DataGrid控件提供分页功能。相对DataGrid，DataList和Repeater控件具有更高的样式自定义性，所以很多时候我们喜欢使用DataList或Repeater控件来显示数据。 实现DataList或Repeater控件的分页显示有几种方法： 1、写一个方法或存储过程，根据传入的页数返回需要显示的数据表（DataTable） 2、使用PagedDataSource类（位于System.Web.UI.WebControls命名空间里） 本篇文章主要说怎么使用PagedD
asp.net中repeater控件分页
征途人生&梦
08-14 642
这是一个分页方法 public static string SqlPage(DataSet ds, int curpage, System.Web.UI.WebControls.Repeater re, string url)     {         System.Web.UI.WebControls.PagedDataSource pds = new System.Web.UI.Web
ASP.NET Repeater 分页显示
weixin_30701521的博客
02-23 142
通过创建多一个Repeater 来作为分页用 <div style="overflow: hidden; padding-bottom: 20px; text-align: center;"> <asp:Repeater ID="rptPaging" runat="server" OnItemCommand=...
asp.net中Repeater分页代码…
绝凌峰
08-07 558
原文地址：asp.net中Repeater分页代码（可以加查询条件）作者：花心太郎我的代码比个别代码要长一些，但是我的可以加查询条件，我测试了个别的代码，他们的代码如果在上面加油查询条件，不直接点击查询按钮，而是直接点击Repeater控件的“下一页”“尾页”等，会发生错误！我在这方面做了一些调整，所以代码相对要长一些： aspx.cs文件   protected void Page_Load(o
ASP.NET--Repeater控件分页功能实现
anko2011的博客
03-16 311
这两天由于‘销售渠道’系统需要实现新功能，开发了三个页面，三个界面功能大致相同。 功能：分页显示特定sql查询结果，点击上一页下一页均可显示。单击某记录可以选定修改某特定字段<DropDownList可选项>点击Upadate按钮之后提交。 因为Repeater没有自带的分页功能，这里使用的是：AspNetPager.dll这个插件，首先引用到项目中，注册: ...
ASP.NET Repeater控件实现数据分页显示与编辑
"在ASP.NET开发中，Repeater控件是一种常用的服务器端数据绑定控件，它能够动态地显示和处理数据集合。本篇文章将探讨如何利用Repeater控件实现分页功能，以便在大量数据展示时提供更好的用户体验。分页是通过在每页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值