结合后台pageInfo实现分页功能

分页功能十分常见，完全前端实现的话可能会比较麻烦，如果能结合后台的pageinfo就会方便很多，只需要写一下创建页码按钮，样式改变，传值等就可以了。

html部分

ps：分页按钮的样式用了bootstrap

     
     

          1
          ${P_rPageInfo1.pages}
          ${P_rPageInfo1.prePage}
          ${P_rPageInfo1.nextPage}
          ${P_rPageInfo1.isFirstPage}
          ${P_rPageInfo1.isLastPage}
          ${P_rPageInfo1.pageNum}
      

      
      

          
首页
          
«
      
      

      

          
»
          
尾页
      

js

   /* 获取首页、下一页、上一页、尾页、页码按钮等 */ 
    var pageList_2 = document.getElementById("page-num-2");
    var first_2 = document.getElementById("first-page-2");
    var last_2 = document.getElementById("last-page-2");
    var previous_2 = document.getElementById("pre-page-2");
    var next_2 = document.getElementById("next-page-2");
   
   /* 获取分页信息 */
    var pages_2;
    var pageNum_2 = $("#pageNum-2").text();
    var firstPage_2 = $("#firstPage-2").text();
    var lastPage_2 = $("#lastPage-2").text();
    var prePage_2 = $("#prePage-2").text();
    var nextPage_2 = $("#nextPage-2").text();
    var isFirstPage_2 = $("#isFirstPage-2").text();
    var isLastPage_2 = $("#isLastPage-2").text();

    var list_2 = pageList_2.getElementsByTagName("li");

    pages_2 = lastPage_2;

    /*动态增加页码按钮*/
    if (pageNum_2 <= 5) {
        if (pages_2 >= 5) {
            for (var i = 0; i < 5; i++) {
                creatElements(i, pageList_2);
            }
        } else {
            for (var j = 0; j < pages_2; j++) {
                creatElements(j, pageList_2);
            }
        }
        setStyle(pageNum_2 - 1, list_2);
    } else {
        for (var k = pageNum_2 - 5; k <= pageNum_2 - 1; k++) {
            creatElements(k, pageList_2);
        }
        setStyle(4, list_2);
    }

    /*首页，上一页禁用*/
    if (isFirstPage_2 == "true") {
        previous_2.className = "disabled";
        first_2.className = "disabled";
    } else {
        previous_2.className = "";
        first_2.className = "";
    }
    /*末页，下一页禁用*/
    if (isLastPage_2 == "true") {
        next_2.className = "disabled";
        last_2.className = "disabled";
    } else {
        next_2.className = "";
        last_2.className = "";
    }

    first_2.onclick = function () {
        toPage(firstPage_2);
    };

    previous_2.onclick = function () {
        toPage(prePage_2);
    };

    next_2.onclick = function () {
        toPage(nextPage_2);
    };

    last_2.onclick = function () {
        toPage(lastPage_2);
    };

    /*动态增加按钮函数*/
    function creatElements(x, obj) {
        var liObj = document.createElement("li");
        var aObj = document.createElement("a");
        aObj.innerText = x + 1;
        obj.appendChild(liObj);
        liObj.appendChild(aObj);
        aObj.onclick = function () {
            toPage(this.innerText);
        };
    }

    /*跳转到指定页*/
    function toPage(num) {
        //var url = updateQueryStringParameter(window.location.href, 'page', pageNum);
        window.location.href = "<%=basePath%>loadPage7?pn="+num;
    }

    function setStyle(cur, obj) {
        /*移除所有样式*/
        for (var i = 0; i < obj.length; i++) {
            obj[i].className = "";
        }
        /*为当前按钮添加样式*/
        obj[cur].className = "active";
    }


    //发送一个ajax请求获得分页数据
    function LoadPage2() {
        var state="2";
        $.ajax({
            url:"<%=basePath%>loadPage",
            type:"GET",
            data:{"state":state},
            success:function (data) {
                //console.log(data);
                //1、在页面解析jason数据并且显示员工数据
                build_pub_act(data);
                //2、解析显示分页信息
                build_page_info(data);
                //3、解析显示分页条信息
                bulid_page_nav(data);
            }
        });
    }

pageinfo各个成员属性详情可参考：https://blog.csdn.net/weixin_41996974/article/details/81099693