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

曾经终败给现在 2022-08-24 00:55 186阅读 0赞

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

#### 地址：[http://www.webdiyer.com/aspnetpagerdemo/applystyles/default.aspx][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;
        }

效果图：

![SouthEast][]

![Image 1][]

[http_www.webdiyer.com_aspnetpagerdemo_applystyles_default.aspx]: http://www.webdiyer.com/aspnetpagerdemo/applystyles/default.aspx
[SouthEast]: /images/20220823/83e6aa48bf5d4a9a83d9bc39c93fa168.png
[Image 1]: