bootstrap自定义分页

最新推荐文章于 2023-10-21 17:50:18 发布

Richard Chijq

最新推荐文章于 2023-10-21 17:50:18 发布

阅读量1.3k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq837993702/article/details/107410806

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、先看分页效果

页面数小于7页时
在这里插入图片描述

页面数大于7页时

在这里插入图片描述

2、分页bootstrap-pagination-spirit.js文件

var total = 0;
var pages = 0;
var limit = 0;
var htmlFirstSeparator = '<li class="page-item page-first-separator disabled"><a class="page-link" href="JavaScript:void(0);">...</a></li>';
var htmlLastSeparator = '<li class="page-item page-last-separator disabled"><a class="page-link" href="JavaScript:void(0);">...</a></li>';

function generatePageItem(pages){
    return '<li class="page-item"><a class="page-link" href="JavaScript:void(0);">'+pages+'</a></li>';
}

$(document).on("click",'.page-item',function () {
    var pageList = $(".pagination").find(".page-item");
    var click = $(this);
    var textClick = click.text();
    var active = $(".pagination").find(".active");
    var textActive = active.find("a").text();
    var pagePre = $(".pagination").find(".page-pre");
    var pageNext = $(".pagination").find(".page-next");
    var firstSeparator = $(".pagination").find(".page-first-separator");
    var lastSeparator = $(".pagination").find(".page-last-separator");
    // 页面只有7页及其以下的数据
    if(pages <= 7){
        if(textClick === "‹"){
            // 点击的是上一页
            if(textActive !== "1"){
                active.removeClass("active");
                active.prev().addClass("active");
            }else{
                active.removeClass("active");
                pageNext.prev().addClass("active");
            }
        }else if(textClick === "›"){
            // 点击的是下一页
            if(textActive !== pages+""){
                active.removeClass("active");
                active.next().addClass("active");
            }else{
                active.removeClass("active");
                pagePre.next().addClass("active");
            }
        }else{
            pageList.removeClass("active");
            $(this).addClass("active");
        }
    }else{
        // 当前点击的是第几个元素
        var indexClick = pageList.index(this);
        var indexActive = pageList.index(active);
        var textClickInt = parseInt(textClick);
        var textActiveInt = parseInt(textActive);
        if(textClick === "‹"){
            // 点击的是上一页
            if((pages-textActiveInt) === 3){
                pageNext.prev().prev().remove();
                pageNext.prev().prev().remove();
                pageNext.prev().before(htmlLastSeparator);
            }
            if(indexActive === 4){
                if(textActiveInt !== 4){
                    // 在最后一个分隔符前去掉一列
                    lastSeparator.prev().remove();
                    // 在第一个分隔符后面加入一列
                    firstSeparator.after(generatePageItem(textActiveInt-2));
                }
                if(textActiveInt === 5){
                    firstSeparator.after(generatePageItem(textActiveInt-3));
                    firstSeparator.remove();
                }
            }
            if(textActiveInt !== 1){
                active.removeClass("active");
                active.prev().addClass("active");
            }else{
                // 点击的是最后一个元素
                for(var m=0; m<5; m++){
                    pageNext.prev().prev().remove();
                }
                for(var n=0; n<4; n++){
                    pageNext.prev().before(generatePageItem(pages-4+n));
                }
                pagePre.next().after(htmlFirstSeparator);
                active.removeClass("active");
                pageNext.prev().addClass("active");
            }
        }else if(textClick === "›"){
            // 点击的是下一页
            if(textActiveInt === 4){
                // 移除2个列
                pagePre.next().next().remove();
                pagePre.next().next().remove();
                // 添加第一个分隔符
                pagePre.next().after(htmlFirstSeparator);
            }
            if(indexActive === 4){
                if((pages - textActiveInt) !== 3){
                    firstSeparator.next().remove();
                    // 在最后一个分隔符前添加一列
                    lastSeparator.before(generatePageItem(textActiveInt+2));
                }
                if((pages - textActiveInt) === 4){
                    lastSeparator.before(generatePageItem(textActiveInt+3));
                    lastSeparator.remove();
                }
            }
            if(textActiveInt !== pages){
                active.removeClass("active");
                active.next().addClass("active");
            }else{
                for(var o=0; o<5; o++){
                    pagePre.next().next().remove();
                }
                for(var p=0; p<4; p++){
                    pagePre.next().after(generatePageItem(5-p));
                }
                pageNext.prev().before(htmlLastSeparator);
                active.removeClass("active");
                pagePre.next().addClass("active");
            }
        }else{
            if(indexClick === 7){
                // 点击的是最后一个元素
                for(var i=0; i<5; i++){
                    pageNext.prev().prev().remove();
                }
                for(var j=0; j<4; j++){
                    pageNext.prev().before(generatePageItem(pages-4+j));
                }
                pagePre.next().after(htmlFirstSeparator);
            }else if(indexClick === 5){
                if(textClickInt === 5){
                    // 移除2个列
                    pagePre.next().next().remove();
                    pagePre.next().next().remove();
                    // 添加第一个分隔符
                    pagePre.next().after(htmlFirstSeparator);
                    // 当前页码后再添加一个页码
                    $(this).after(generatePageItem(6));
                    // 判断是否去掉最后一个分隔符
                    if((pages - textClickInt) === 3){
                        lastSeparator.before(generatePageItem(pages-1));
                        lastSeparator.remove();
                    }
                }else{
                    if((pages - textClickInt) !== 2){
                        // 移除前一个分隔符后面的一列
                        firstSeparator.next().remove();
                        // 在后一个分隔符前面加入一列
                        lastSeparator.before(generatePageItem(textClickInt+1));
                        // 判断是否去掉最后一个分隔符
                        if((pages - textClickInt) === 3){
                            lastSeparator.before(generatePageItem(pages-1));
                            lastSeparator.remove();
                        }
                    }
                }
            }else if(indexClick === 4){
                // 无变化
            }else if(indexClick === 3){
                if((pages - textClickInt) === 4){
                    pageNext.prev().prev().remove();
                    pageNext.prev().prev().remove();
                    pageNext.prev().before(htmlLastSeparator);
                }
                if(textClickInt !== 3){
                    // 移除后一个分隔符前面的一列
                    lastSeparator.prev().remove();
                    // 在第一个分隔符前面加入一列
                    firstSeparator.after(generatePageItem(textClickInt-1));
                    // 如果点击的数字是4，再在第一个分隔符前面加入一列，同时移除第一个分隔符
                    if(textClickInt === 4){
                        firstSeparator.after(generatePageItem(2));
                        firstSeparator.remove();
                    }
                }
            }else if(indexClick === 1){
                // 点击的是第一个元素
                for(var k=0; k<5; k++){
                    pagePre.next().next().remove();
                }
                for(var l=0; l<4; l++){
                    pagePre.next().after(generatePageItem(5-l));
                }
                pageNext.prev().before(htmlLastSeparator);
            }
            if(textClick !== "..."){
                pageList.removeClass("active");
                $(this).addClass("active");
            }
        }
    }
     console.log($(".pagination").find(".active").find("a").text());
    updatePaginationDetail(parseInt($(".pagination").find(".active").find("a").text()));
});
function initSpiritPagination(total, pages, limit){
    this.total = total;
    this.pages = pages;
    this.limit = limit;
    var html = '';
    var commonHead = '<div class="float-left pagination-detail">' +
        '<span class="pagination-info">' +
        '显示第 1 到第 '+limit+' 条记录，总共 '+total+' 条记录' +
        '</span>' +
        '</div>' +
        '<div style="float:right" class="float-right pagination">' +
        '<ul class="pagination">' +
        '<li class="page-item page-pre"><a class="page-link" href="JavaScript:void(0);">‹</a></li>'+
        '<li class="page-item active"><a class="page-link" href="JavaScript:void(0);">1</a></li>';
    if(pages === 0){
        html =  '<div class="float-left pagination-detail">' +
            '<span class="pagination-info">' +
            '显示第 0 到第 0 条记录，总共 0 条记录' +
            '</span>' +
            '</div>';
    }else if(pages === 1){//只有一页数据
        html =  '<div class="float-left pagination-detail">' +
            '<span class="pagination-info">' +
            '显示第 1 到第 '+total+' 条记录，总共 '+total+' 条记录' +
            '</span>' +
            '</div>';
    }else if(pages <= 7){
        html =  commonHead;
        for(var i=1; i< pages; i++){
            html += '<li class="page-item"><a class="page-link" href="JavaScript:void(0);">'+(i+1)+'</a></li>';
        }
        html += '<li class="page-item page-next"><a class="page-link" href="JavaScript:void(0);">›</a></li>'+
            '</ul></div>';
    }else if(pages > 7){
        html =  commonHead;
        for(var j=0; j< 4; j++){
            html += '<li class="page-item"><a class="page-link" href="JavaScript:void(0);">'+(j+2)+'</a></li>';
        }
        html += '<li class="page-item page-last-separator disabled"><a class="page-link" href="JavaScript:void(0);">...</a></li>'+
            '<li class="page-item"><a class="page-link" href="JavaScript:void(0);">'+pages+'</a></li>'+
            '<li class="page-item page-next"><a class="page-link" href="JavaScript:void(0);">›</a></li>'+
            '</ul></div>';
    }
    $(".spiritPagination").html(html);
}

function updatePaginationDetail(pages){
    var from = (pages-1) * this.limit + 1;
    var to = pages * this.limit;
    if(pages === this.pages){
        to = this.total;
    }
    var html = '显示第 '+from+' 到第 '+to+' 条记录，总共 '+this.total+' 条记录';
    $(".pagination-info").html(html);
    updateViewInfo(pages, this.limit);
}

3、页面引入分页JS文件并添加HTML

<script type="text/javascript" th:src="@{/js/bootstrap-pagination-spirit.js}"></script>

<div class="widget-content">
    <table class="table table-striped table-bordered">
        <thead>
        <tr>
            <th> 楼栋名</th>
            <th> 楼层</th>
            <th> 房间号</th>
            <th> 空床位数</th>
            <th style="width: 20%" class="td-actions"> 操作</th>
        </tr>
        </thead>
        <tbody id="roomList">
        </tbody>
    </table>
    <div class="spiritPagination"></div>
</div>

js请求后端数据并生成表格数据

 var defaultPageSize = 5;//页面大小
  var totalPages = 1;//总页数
  var currentPage = 1;//当前页码
function getRooms(type) {//type == 1  表示初始化
        if (type == 1) {
            currentPage = 1;//重修查询初始化到第一页
        }
        $.ajax({
            url: /*[[@{/selectroom/getlegalrooms}]]*/,
            type: "get",
            async: false,
            dataType: "json",
            data: {
                "ldid": ldid,
                "floor": floor,
                "current": currentPage,
                "pageSize": defaultPageSize
            },
            beforeSend: function () {
                // 图标转转转
                $.blockUI({message: '<h4><img th:src="@{/img/css_Wait.gif}" /> 请求中,请稍等...</h4>'});

            },
            complete: function () {
                $.unblockUI();
            },
            success: function (data) {
                $.unblockUI();
                $("#roomList").empty();
                var tbodyHtml = $("#roomList").html();
                var roomList = [];
                if (data != null) {
          				roomList = data.rooms;//后端查询列表数据
                        totalCount = data.count;//后端查询列表总数量
                        // 总页数向上取整
                        totalPages = Math.ceil(totalCount / defaultPageSize);
                        $.each(roomList, function (index, obj) {
                                //添加行
                         var rowTemplate = "<tr>" +
                                    "<td> " + obj.ldm + "</td>" +
                                    "<td> " + obj.fjh.substr(0, 1) + "</td>" +
                                    "<td> " + obj.fjh + "</td>" +
                                    "<td> " + obj.num + "</td>" +
                                    "<td class=\"td-actions\">" +
                                    "<button type=\"button\"  οnclick=\"getInterests(" + obj.ldid + ',' + obj.fjh + ")\" class=\"btn btn-info\">查看房间信息</button>" +
                                
                                    "</td>" +
                                    "</tr>";
                                tbodyHtml += rowTemplate;
                            });
                            if (type == 1) {
                            //初始化分页数据1、数据总条数，2、总页数，3、页面大小
                             initSpiritPagination(data.count, totalPages, defaultPageSize);
                        $("#roomList").html(tbodyHtml);
                    } 
                } 
            },
            error: function () {
               
            }
        });
    }

 //点击分页时执行方法
    function updateViewInfo(pageCurrent, pageSum) {
        currentPage = pageCurrent;
  		this.getRooms(2);
    }