js分页

作者: 记忆是条狗 | 来源:发表于2020-08-15 11:01 被阅读0次
//生成分页按钮
    createBtns: function(totalPages, current, totalCounts) {
        var tempStr = "";
        /*上一页按钮*/
        tempStr += '<div class="item pre" data-id="pre"></div>';
        /*中间页码的显示*/
        /*如果总页数超出5个处理办法*/
        if (totalPages <= 5) {
            for (var pageIndex = 1; pageIndex < totalPages + 1; pageIndex++) {
                tempStr += '<div class="item" data-id="' + pageIndex + '">' + pageIndex + '</div>';
            }
        } else {
            if (current < 5) {
                for (var pageIndex = 1; pageIndex < 5; pageIndex++) {
                    tempStr += '<div class="item" data-id="' + pageIndex + '">' + pageIndex + '</div>';
                }
                tempStr += '<div class="item ellipsis" data-id="' + 5 + '">....</div>';
                tempStr += '<div class="item" data-id="' + totalPages + '">' + totalPages + '</div>';
            } else if (current >= totalPages - 4) {
                tempStr += '<div class="item" data-id="' + 1 + '">' + 1 + '</div>';
                tempStr += '<div class="item ellipsis" data-id="' + 2 + '">....</div>';
                for (var pageIndex = totalPages - 4; pageIndex <= totalPages; pageIndex++) {
                    tempStr += '<div class="item" data-id="' + pageIndex + '">' + pageIndex + '</div>';
                }
            } else if (current >= 5 && current < totalPages - 4) {
                tempStr += '<div class="item" data-id="' + 1 + '">' + 1 + '</div>';
                tempStr += '<div class="item ellipsis" data-id="' + 2 + '">....</div>';
                for (var pageIndex = current; pageIndex <= current + 4; pageIndex++) {
                    tempStr += '<div class="item" data-id="' + pageIndex + '">' + pageIndex + '</div>';
                }
                tempStr += '<div class="item ellipsis" data-id="' + (current + 5) + '">....</div>';
                tempStr += '<div class="item" data-id="' + totalPages + '">' + totalPages + '</div>';
            }
        }
        /*下一页按钮*/
        tempStr += '<div class="item next" data-id="next"></div';

        var oP = $('.m-pageno');
        oP.find('.btns').html(tempStr);
        oP.find('.desc').html('共' + totalCounts + '条记录 / 共' + totalPages + '页');
        oP.find('.item[data-id="' + current + '"]').addClass('cur');

    },
    bindEvents: function() {
        if (this.has_bind) {
            return;
        }
        this.has_bind = true;

        var that = this;
        var doc = $(document);

        doc.delegate(".m-pageno .item", "click", function(e) {
            e.preventDefault();
            var id = $(this).attr("data-id");
            if (id == 'pre') {
                id = that.page_no - 1;
            } else if (id == 'next') {
                id = that.page_no + 1;
            } else {

            }
            if (id < 1 || id > that.page_count) {
                return;
            }
            that.getList(urlParams.type || 1, id);
        });
    },

相关文章

网友评论

      本文标题:js分页

      本文链接:https://www.haomeiwen.com/subject/nozodktx.html