结合后台pageInfo实现分页功能

最新推荐文章于 2024-09-01 18:43:29 发布

原创最新推荐文章于 2024-09-01 18:43:29 发布 · 3.8k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何结合后台的PageInfo对象实现前端分页功能，降低了前端复杂度。主要涉及HTML页面创建和JS交互，利用bootstrap样式美化分页按钮。通过获取pageInfo的详细属性，轻松完成分页操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

html部分

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

<div id="pagination-2">
     <!-- 分页信息 -->
     <div id="pagination-inform-2" style="display: none">
          <span id="firstPage-2">1</span>
          <span id="lastPage-2">${P_rPageInfo1.pages}</span>
          <span id="prePage-2">${P_rPageInfo1.prePage}</span>
          <span id="nextPage-2">${P_rPageInfo1.nextPage}</span>
          <span id="isFirstPage-2">${P_rPageInfo1.isFirstPage}</span>
          <span id="isLastPage-2">${P_rPageInfo1.isLastPage}</span>
          <span id="pageNum-2">${P_rPageInfo1.pageNum}</span>
      </div>

      <!-- 分页按钮 -->
      <ul class="pagination">
          <li id="first-page-2"><a>首页</a></li>
          <li id="pre-page-2"><a>&laquo;</a></li>
      </ul>
      <ul class="pagination" id="page-num-2"></ul>
      <ul class="pagination">
          <li id="next-page-2"><a>&raquo;</a></li>
          <li id="last-page-2"><a>尾页</a></li>
      </ul>
</div>

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.youkuaiyun.com/weixin_41996974/article/details/81099693