给AspNetPager分页控件添加bootstrap样式

最新推荐文章于 2019-01-16 20:22:34 发布

NickWei1994

最新推荐文章于 2019-01-16 20:22:34 发布

阅读量178

点赞数

原文链接：http://www.cnblogs.com/shihao316558512/p/5580839.html

版权

AspNetPager分页控件算是比较好用的一个分页控件了。想要结合bootstrap使用，官方代码入口

.pagination a[disabled]{  color: #777;cursor: not-allowed;background-color: #fff;border-color: #ddd;}
.pagination span.active{z-index: 2;color: #fff;cursor: default;background-color: #337ab7;border-color: #337ab7;}

 <nav class="pull-right">
        <webdiyer:AspNetPager ID="dpUsedTemplate" runat="server" OnPageChanged="dpUsedTemplate_PageChanged"
            CssClass="pagination" LayoutType="Ul" PagingButtonLayoutType="UnorderedList" PagingButtonSpacing="0" CurrentPageButtonClass="active" PageSize="10">
        </webdiyer:AspNetPager>
    </nav>

发现问题：当数据总数超过30时，会自动出现两个控件，官方说明

解决方案1：

　　给两个自动多出来的控件加样式

.pagination input[type=text] { width: 50px !important; display: inline-block; }
.pagination input[type=submit] { margin-left: 10px; }

 <nav class="pull-right">
        <webdiyer:AspNetPager ID="dpUsedTemplate" runat="server" OnPageChanged="dpUsedTemplate_PageChanged"
            CssClass="pagination" LayoutType="Ul" PagingButtonLayoutType="UnorderedList" PagingButtonSpacing="0" CurrentPageButtonClass="active" PageSize="10" PageIndexBoxClass="form-control" SubmitButtonClass="btn btn-primary">
        </webdiyer:AspNetPager>
    </nav>

解决方案二：

　　让控件永不多出来

   <nav class="pull-right">
        <webdiyer:AspNetPager ID="dpUsedTemplate" runat="server" OnPageChanged="dpUsedTemplate_PageChanged"
            CssClass="pagination" LayoutType="Ul" PagingButtonLayoutType="UnorderedList" PagingButtonSpacing="0" CurrentPageButtonClass="active" PageSize="10" ShowPageIndexBox="Never">
        </webdiyer:AspNetPager>
    </nav>

转载于:https://www.cnblogs.com/shihao316558512/p/5580839.html