资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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

function Page(index, size, count) {
                var len = 10,
                        show = len - 3;


                var prev = $("
  • ").addClass("prev").html('"#">上一页');
                    var next = $("
  • ").addClass("next").html('"#">下一页');
                    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 = $("
  • ").html('"#">1').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 = $("
  • ").html('"#">' + i + '');
                                            if (i === index + 1) li.addClass("active");
                                            _p.append(li);
                                    }
                            }

                            if (_page > len) {

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

                                                    _p.append(li);
                                            }
                                            _p.append(li);
                                            $("
  • ").html('"#">...').appendTo(_p);

                                            li = $("
  • ").html('"#">' + _page + '');

                                            _p.append(li);

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

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

                                            _p.append(li);

                                            $("
  • ").html('"#">...').appendTo(_p);


                                            /*中间页*/

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


                                            /* 最后页*/
                                            $("
  • ").html('"#">...').appendTo(_p);

                                            li = $("
  • ").html('"#">' + _page + '');

                                            _p.append(li);

                                    }

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

                                            _p.append(li);

                                            $("
  • ").html('"#">...').appendTo(_p);


                                            /* 中间页 */

                                            for (var i = _page - 8; i < _page + 1; i++) {
                                                    li = $("
  • ").html('"#">' + i + '');
                                                    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;
    }

    名称栏目:急急忙忙写了个JS分页。先存着了,有时候再改
    网站地址:http://cdkjz.cn/article/jidhpc.html
    多年建站经验

    多一份参考,总有益处

    联系快上网,免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈,可以通过以下方式与我们联系

    大客户专线   成都:13518219792   座机:028-86922220