温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

急急忙忙写了个JS分页。先存着了,有时候再改

发布时间:2020-06-28 13:12:30 来源:网络 阅读:442 作者:s363905520 栏目:编程语言
function Page(index, size, count) {
                var len = 10,
                        show = len - 3;


                var prev = $("<li />").addClass("prev").html('<a href="#">上一页</a>');
                var next = $("<li />").addClass("next").html('<a href="#">下一页</a>');
                var li;
                if (index <= 0) prev.addClass("disabled");
                if (index >= count / size || index + 1 >= count / size) next.addClass("disabled");
                var _p = $(".dataTables_paginate > ul");


                _p.html("");

                //上一页
                prev.click(function () {
                        if (index > 0) load(index);
                });
                _p.append(prev);
                if (index * size >= count) {
                        li = $("<li />").html('<a href="#">1</a>').addClass("active");
                        _p.append(li);
                }
                var _page = (count % size) == 0 ? count / size : parseInt(count / size) + 1;
                if (index * size < count) {

                        if (_page <= len) {
                                for (var i = 1; i < _page + 1; i++) {
                                        li = $("<li />").html('<a href="#">' + i + '</a>');
                                        if (i === index + 1) li.addClass("active");
                                        _p.append(li);
                                }
                        }

                        if (_page > len) {

                                if (index < show) {
                                        for (var i = 1; i < 9; i++) {
                                                li = $("<li />").html('<a href="#">' + i + '</a>');
                                                if (i === index + 1) li.addClass("active");

                                                _p.append(li);
                                        }
                                        _p.append(li);
                                        $("<li />").html('<a href="#">...</a>').appendTo(_p);

                                        li = $("<li />").html('<a href="#">' + _page + '</a>');

                                        _p.append(li);

                                }
                                if (index >= show && index <= _page - show) {

                                        /* 第一页*/
                                        li = $("<li />").html('<a href="#">1</a>');

                                        _p.append(li);

                                        $("<li />").html('<a href="#">...</a>').appendTo(_p);


                                        /*中间页*/

                                        for (var i = index - 2; i < index + 6; i++) {
                                                li = $("<li />").html('<a href="#">' + i + '</a>');
                                                if (i === index + 1) li.addClass("active");
                                                _p.append(li);
                                        }


                                        /* 最后页*/
                                        $("<li />").html('<a href="#">...</a>').appendTo(_p);

                                        li = $("<li />").html('<a href="#">' + _page + '</a>');

                                        _p.append(li);

                                }

                                if (index > _page - show) {
                                        /* 第一页 */
                                        li = $("<li />").html('<a href="#">1</a>');

                                        _p.append(li);

                                        $("<li />").html('<a href="#">...</a>').appendTo(_p);


                                        /* 中间页 */

                                        for (var i = _page - 8; i < _page + 1; i++) {
                                                li = $("<li />").html('<a href="#">' + i + '</a>');
                                                if (i === index + 1) li.addClass("active");

                                                _p.append(li);
                                        }

                                }

                        }
                        next.click(function () {
                                if (index < _page - 1) load(index + 2);
                        });
                        _p.append(next);

                        $("li:not(:first):not(:last) a").click(function () {
                                var _pa = $(this).text();
                                if (_pa != "...") {

                                        load(_pa);
                                }

                        });
                }
        }
CSS:
 

.pagination
{
        height
: 36px;
        margin
: 18px 0;
}

        .pagination ul
{
                display
: inline-block;
                *display
: inline;
                *zoom
: 1;
                margin-left
: 0;
                margin-bottom
: 0;
                -webkit-border-radius
: 3px;
                -moz-border-radius
: 3px;
                border-radius
: 3px;
                -webkit-box-shadow
: 0 1px 2px rgba(0, 0, 0, 0.05);
                -moz-box-shadow
: 0 1px 2px rgba(0, 0, 0, 0.05);
                box-shadow
: 0 1px 2px rgba(0, 0, 0, 0.05);
        }

                .pagination ul > li
{
                        display
: inline;
                }

                        .pagination ul > li > a, .pagination ul > li > span
{
                                float
: left;
                                padding
: 0 14px;
                                line-height
: 34px;
                                text-decoration
: none;
                                background-color
: #ffffff;
                                border
: 1px solid #dddddd;
                                border-left-width
: 0;
                        }

                                .pagination ul > li > a:hover, .pagination ul > .active > a, .pagination ul > .active > span
{
                                        background-color
: #f5f5f5;
                                }

                .pagination ul > .active > a, .pagination ul > .active > span
{
                        color
: #999999;
                        cursor
: default;
                }

                .pagination ul > .disabled > span, .pagination ul > .disabled > a, .pagination ul > .disabled > a:hover
{
                        color
: #999999;
                        background-color
: transparent;
                        cursor
: default;
                }

                .pagination ul > li:first-child > a, .pagination ul > li:first-child > span
{
                        border-left-width
: 1px;
                        -webkit-border-radius
: 3px 0 0 3px;
                        -moz-border-radius
: 3px 0 0 3px;
                        border-radius
: 3px 0 0 3px;
                }

                .pagination ul > li:last-child > a, .pagination ul > li:last-child > span
{
                        -webkit-border-radius
: 0 3px 3px 0;
                        -moz-border-radius
: 0 3px 3px 0;
                        border-radius
: 0 3px 3px 0;
                }

.pagination-centered
{
        text-align
: center;
}

.pagination-right
{
        text-align
: right;
}
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI