基于bootstrap 分页 制作一个分页小工具

基于bootstrap的分页小插件

bootstrap的ui

 <ul class="pagination ">
     <li class="page-item"><a class="page-link " href="# ">上一页</a></li>
 	 <li class="page-item active"><a class="page-link " οnclick="skip(this)" href="# ">1</a></li>
     <li class="page-item "><a class="page-link" οnclick="skip(this)" href="# ">2</a></li>
     <li class="page-item "><a class="page-link " οnclick="skip(this)" href="# ">3</a></li>
     <li class="page-item "><a class="page-link " οnclick="skip(this)" href="# ">4</a></li>
     <li class="page-item "><a class="page-link " href="# ">下一页</a></li>
</ul>

下面是jquery代码，实现了 上下翻页
只需要知道总页数（totalPage） 一个页面的容量（capacity） 已经当前页（currentPage）

var currentPage = 0; //其实当前页
var totalPage = 10; //总页数
var capacity = 4; //页面容量是4
var number = 0; //记录渲染次数
var changeNumber = 0; //记录需要几个页面

$(function() {
    pageShow();
});


//初始化翻页
function initPagination(begin) {
    var pageLink = $(".page-link");
    var pageItem = $(".page-item");
    //初始化页码以及当前页
    for (var i = begin; i < capacity * (number + 1); i++) {
        $(pageLink).eq((i % capacity) + 1).html(i + 1);
        $(pageItem).eq((i % capacity) + 1).css("display", "block");
        if ($(pageItem).eq((i % capacity) + 1).hasClass("active")) {
            $(pageItem).eq((i % capacity) + 1).removeClass("active");
        }
    }
    $(pageItem).eq(1).addClass("active");
    pageButtonStatus();
}


//判断总页数与上下翻页关系
function pageButtonStatus() {
    if (currentPage == 0) {
        $(".page-item").eq(0).addClass("disabled");
    } else {
        if ($(".page-item").eq(0).hasClass("disabled")) {
            $(".page-item").eq(0).removeClass("disabled");
        }
    }
    //下一页
    if (currentPage < totalPage - 1) {
        if ($(".page-item").eq(5).hasClass("disabled")) {
            $(".page-item").eq(5).removeClass("disabled");
        }
    } else {
        $(".page-item").eq(5).addClass("disabled");
    }
}

//渲染页面
function pageShow() {
    initPagination(currentPage);
    if (totalPage <= capacity) {
        var i = capacity - totalPage;
        for (var n = 0; n < i; n++) {
            $(".page-item").eq(capacity - n).css("display", "none");
        }
    } else {
        changeNumber = (totalPage % capacity == 0) ? (totalPage / capacity) : Math.ceil(totalPage / capacity);
        if (changeNumber - 1 == number) {
            var i = capacity - (totalPage % capacity);
            for (var n = 0; n < i; n++) {
                $(".page-item").eq(capacity - n).css("display", "none");
            }
        }
    }
}

//向上翻页
$(".page-item").eq(0).click(function() {
    if (!($(this).hasClass("disabled"))) {
        currentPage = currentPage - 1;
        console.log(currentPage);
        if (currentPage >= number * capacity) {
            $(".page-item").eq(currentPage % capacity + 2).removeClass("active");
            $(".page-item").eq(currentPage % capacity + 1).addClass("active");
            pageButtonStatus();
        } else {
            number--;
            var begin = currentPage - capacity + 1;
            initPagination(begin);
            //按钮颜色的渲染
            $(".page-item").eq((begin % capacity) + 1).removeClass("active");
            $(".page-item").eq(currentPage % capacity + 1).addClass("active");
        }
    }
});


//向下翻页
$(".page-item").eq(5).click(function() {
    if (!($(this).hasClass("disabled"))) {
        currentPage = currentPage + 1;
        if (currentPage < (number + 1) * capacity) {
            $(".page-item").eq(currentPage % capacity).removeClass("active");
            $(".page-item").eq(currentPage % capacity + 1).addClass("active");
            pageButtonStatus();
        } else {
            number++;
            pageShow();
        }
    }
});


//点击页码翻页
function skip(obj) {
    var page = $(obj).html();
    $(".page-item").eq((currentPage % capacity) + 1).removeClass("active");
    $(".page-item").eq((page - 1) % capacity + 1).addClass("active");
    currentPage = page - 1;
    pageButtonStatus();
}

转载请注明转载出处，最好获取转载版权，联系email：493116703@qq.com