分页控件及其CSS样式

在web应用开发中,我们经常会应用到分页控件,因此我们以listview为数据主体来构建分页,并且控制其CSS样式

分页控件为:DaterPage 其有两个重要属性:pagerControlID pagesize 分别表示其控制控件的ID和每页显示数量

另外:在编写其CSS代码前,要将其元素分类,必要时将其转化:

例如,将当前页的LINK元素转化为:

CurrentPageLabelCssClass="pageNow"

  将不易区分无效按钮转化为label(编译后变为span):

RenderDisabledButtonsAsLabels="true"
注:为了避免样式覆盖,在定义样式的时候,要先定义元素的共性,然后定义元素的个性

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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></title>
    <style type="text/css">
       div.divPager
       {
           padding:12px;
           background-color:#363636;
           }
       .divPager a,.divPager span span
       {
           display:block;
           float:left;
           padding:3px 5px 3px 5px;
           margin-left:5px;
           color:#ddd;
           background-color:#630;
           border:1px solid #d88;
           text-decoration:none;
           }
        .divPager span.PageNow
        {
            background-color:#a30;
            color:White;
            font-weight:bold;
            border:1px solid #ddd;
            }
         .divPager a:hover
         {
             background-color:#a30;
             color:White;
             }
          .divPager span span
          {
              border:1px solid gray;
              color:#999;
              }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        
        <asp:ListView ID="ListView1" runat="server" ItemPlaceholderID="itemholder" DataSourceID="AccessDataSource1">
            
            <LayoutTemplate>
            <div  runat="server" id="itemholder"></div>
            </LayoutTemplate>
            <ItemTemplate>
                <div style="padding:5px;border:1px solid silver"><%#Eval("mo_name") %>></div>
            </ItemTemplate>

        </asp:ListView>
 
        <asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="3" >
            <Fields>
           <asp:NextPreviousPagerField  ButtonType="Link" ShowFirstPageButton="true" ShowLastPageButton="false" 
           ShowNextPageButton="false" ShowPreviousPageButton="true" RenderDisabledButtonsAsLabels="true"/>
           <asp:NumericPagerField  ButtonCount="4" ButtonType="Link" NextPageText=">>" PreviousPageText="<<"
            CurrentPageLabelCssClass="pageNow"/>
           <asp:NextPreviousPagerField  ButtonType="Link" ShowFirstPageButton="false" ShowLastPageButton="true" 
           ShowNextPageButton="true" ShowPreviousPageButton="false" RenderDisabledButtonsAsLabels="true"/>
            </Fields>
        </asp:DataPager>

        <div class="divPager">
         <asp:DataPager ID="DataPager2" runat="server" PagedControlID="ListView1" PageSize="3" >
            <Fields>
           <asp:NextPreviousPagerField  ButtonType="Link" ShowFirstPageButton="true" ShowLastPageButton="false" 
           ShowNextPageButton="false" ShowPreviousPageButton="true" RenderDisabledButtonsAsLabels="true"/>
           <asp:NumericPagerField  ButtonCount="4" ButtonType="Link" NextPageText=">>" PreviousPageText="<<"
            CurrentPageLabelCssClass="pageNow"/>
           <asp:NextPreviousPagerField  ButtonType="Link" ShowFirstPageButton="false" ShowLastPageButton="true" 
           ShowNextPageButton="true" ShowPreviousPageButton="false" RenderDisabledButtonsAsLabels="true"/>
            </Fields>
        </asp:DataPager>
        </div>

        <asp:AccessDataSource ID="AccessDataSource1" runat="server" 
            DataFile="~/mdb/envision.mdb" SelectCommand="SELECT * FROM [MONITOR 显示内容]">
        </asp:AccessDataSource>
        <div style="clear:both"></div>
    </div>
    </form>
</body>
</html>


你可能感兴趣的:(分页控件及其CSS样式)