分页前端的代码

最新推荐文章于 2023-06-28 23:17:06 发布

weixin_30535167

最新推荐文章于 2023-06-28 23:17:06 发布

阅读量78

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/llcdbk/p/5973336.html

版权

HTMl：

<div class="paging">
                            <div class="page-num">
                                <select id="selPageSize">
                                    <option value="10">10</option>
                                    <option value="20">20</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                            </div>
                            <div class="page-prev-button">
                                <a href="javascript:void(0)" class="page-prev-home"></a>
                                <a href="javascript:void(0)" class="page-prev"></a>
                            </div>
                            <div class="page-curr">
                                0/0
                            </div>
                            <div class="page-next-button">
                                <a href="javascript:void(0)" class="page-next"></a>
                                <a href="javascript:void(0)" class="page-next-end"></a>
                            </div>
                            <div class="page-count">
                                共&nbsp;<span>0</span>&nbsp;条
                            </div>
                        </div>

CSS：

.list-search .paging {
    height: 30px;
    background-color: #f5f5f5;
    padding: 5px;
    display: inline-block;
    width: 100%;
}

    .list-search .paging .page-num {
        display: inline-block;
        float: left;
        margin-right: 5px;
        border-right: solid 1px #ccc;
        padding-right: 5px;
    }

        .list-search .paging .page-num select {
            width: 50px;
            height: 21px;
        }

    .list-search .paging .page-prev-button {
        width: 40px;
        height: 100%;
        display: inline-block;
        float: left;
        border-right: solid 1px #ccc;
    }

        .list-search .paging .page-prev-button .page-prev-home {
            display: inline-block;
            width: 15px;
            height: 100%;
            background: url('../images/CloudStorage/pagination_icons.png') no-repeat;
            background-position-y: 2px;
        }

        .list-search .paging .page-prev-button .page-prev {
            display: inline-block;
            width: 15px;
            height: 100%;
            background: url('../images/CloudStorage/pagination_icons.png') no-repeat;
            background-position: -20px 2px;
        }

    .list-search .paging .page-curr {
        width: 70px;
        height: 100%;
        display: inline-block;
        float: left;
        text-align: center;
        border-right: solid 1px #ccc;
    }

    .list-search .paging .page-next-button {
        width: 40px;
        height: 100%;
        display: inline-block;
        float: left;
        border-right: solid 1px #ccc;
    }

        .list-search .paging .page-next-button .page-next {
            display: inline-block;
            width: 15px;
            height: 100%;
            background: url('../images/CloudStorage/pagination_icons.png') no-repeat;
            background-position: -28px 2px;
        }

        .list-search .paging .page-next-button .page-next-end {
            display: inline-block;
            width: 15px;
            height: 100%;
            background: url('../images/CloudStorage/pagination_icons.png') no-repeat;
            background-position: -47px 2px;
        }

    .list-search .paging .page-count {
        height: 100%;
        width: 100px;
        float: left;
        margin-left: 5px;
    }