C# Repeater、webdiyer:AspNetPager分页 AspNetPager分页样式

浏览数：213 / 时间：2015年06月09日

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;
    }

效果图：