AspNetPager分页样式：1、网易风格 2、拍拍风格 3、迅雷风格

地址：http://www.webdiyer.com/aspnetpagerdemo/applystyles/default.aspx

 

BootScript框架下分页：

   <div class="row">
                            <div class="col-lg-1 col-sm-4 col-xs-4 col-xxs-12">
                            </div>
                            <div class="col-lg-11 col-sm-12 col-xs-12 col-xxs-12">
                                <table class="table table-striped table-hover  table-bordered  bootstrap-datatable   " id="DataTables_Table_CSTC" aria-describedby="DataTables_Table_CSTC_info">
                                    <thead>
                                        <tr>
                                            <td class="sorting">客服</td>
                                            <td class="sorting">再联系时间</td>
                                            <td class="sorting">备注信息</td>
                                            <td class="sorting">成交金额</td>
                                            <td class="sorting">时间</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <asp:Repeater ID="Repeater_CSTC" runat="server">
                                            <ItemTemplate>
                                                <tr>
                                                    <td class=""><%#Eval("CustomerServiceID")%></td>
                                                    <td class=""><%#Eval("NextContactDate")%></td>
                                                    <td class=""><%#Eval("Remark")%></td>
                                                    <td class=""><%#Eval("TransactionAmount")%></td>
                                                    <td class=""><%#Eval("CreateDate").ToString()=="0001/1/1 0:00:00"?

 

"":Eval("CreateDate").ToString()%></td> </tr> </ItemTemplate> </asp:Repeater> </tbody> </table> </div> </div> <div class="row" style="margin-top: 15px;"> <div class="col-lg-1 col-sm-4 col-xs-4 col-xxs-12"> </div> <div class="col-lg-11 col-sm-12 col-xs-12 col-xxs-12"> <%-- <div style='font-size:14px;'>共<label style="color:#20A8D8; font-size:14px;""><%=this.AspNetPager_CSTC.RecordCount %></label>条记录</div>--%> </div> </div> <div class="row"> <div class="col-lg-1 col-sm-4 col-xs-4 col-xxs-12"> </div> <div class="col-lg-11 col-sm-12 col-xs-12 col-xxs-12"> <webdiyer:AspNetPager ID="AspNetPager_CSTC" CssClass="paginator" CurrentPageButtonClass="cpb" OnPageChanged="AspNetPager_CSTC_PageChanged" runat="server" FirstPageText="首页" LastPageText="尾页" NextPageText="← 下一页" PrevPageText="← 上一页" AlwaysShow="true" ShowPageIndexBox="Never" NumericButtonCount="10" CurrentPageButtonPosition="End" ShowFirstLast="false"> </webdiyer:AspNetPager> </div> </div>


AspNetPager.css
.paginator {
    font: 11px Arial, Helvetica, sans-serif;
    padding: 10px 0px 10px 0;
    margin: 0px;
    text-align:right;
}

    .paginator a {
        padding: 1px 6px;
        border: solid 1px #ddd;
        background: #fff;
        text-decoration: none;
        margin-right: 2px;
        color: #20A8D8;
    }

        .paginator a:visited {
            padding: 1px 6px;
            border: solid 1px #ddd;
            background: #fff;
            text-decoration: none;
            color: #20A8D8;
        }

    .paginator .cpb {
        padding: 1px 6px;
        font-weight: bold;
        font-size: 13px;
        border: none;
        color: #ffffff;
        background: #20A8D8;
    }

    .paginator a:hover {
        color: #fff;
        background: #20A8D8;
        border-color: #20A8D8;
        text-decoration: none;
    }
效果图：
C# Repeater、webdiyer:AspNetPager分页 AspNetPager分页样式_迅雷