隨手記--js頁面分頁（不需要後臺mySql使用limit）

最近做一個項目，js頁面分頁展示，但是後臺沒有list返回，只有一個數據統計，類似於totalNums（總記錄數），說白了就

只有一個數，比如30,40,50.這樣。

然後，在js頁面發送請求，獲取到這個數之後，利用這個數，再拼裝一些標籤。組成自己想要的分頁展示內容。這裏就沒有使用到後臺mySql語句的limit。

隨手記錄一下，方便以後調用，看代碼：

首先是自己在網上搜到案例：

<html>
<head>
    <meta charset='utf-8'>
    <style type="text/css">
        #idData {color: red;border: solid;text-align: center;}
        a{text-decoration: none;}
    </style>
</head>
<body onLoad="goPage(1,10);">
<table id="idData" width="70%">
    <tr><td>liujinzhong1</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong2</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong3</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong4</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong5</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong6</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong7</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong8</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong9</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong10</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong11</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong12</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong13</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong14</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong15</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong16</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong17</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong18</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong19</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong20</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong21</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong22</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong23</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong24</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong25</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong26</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong27</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong28</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong29</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong30</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong31</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong32</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong33</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong34</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong35</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong36</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong37</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong38</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong39</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
    <tr><td>liujinzhong40</td><td>25</td><td>男</td><td>山西呂梁</td></tr>
</table>
<table width="60%" align="right">
    <tr><td><div id="barcon" name="barcon"></div></td></tr>
</table>
<script>
    function goPage(pno,psize){
        var itable = document.getElementById("idData");
        var num = itable.rows.length;//表格所有行數(所有記錄數)
        console.log(num);
        var totalPage = 0;//總頁數
        var pageSize = psize;//每頁顯示行數
        //總共分幾頁
        if(num/pageSize > parseInt(num/pageSize)){
            totalPage=parseInt(num/pageSize)+1;
        }else{
            totalPage=parseInt(num/pageSize);
        }
        var currentPage = pno;//當前頁數
        var startRow = (currentPage - 1) * pageSize+1;//開始顯示的行  31
        var endRow = currentPage * pageSize;//結束顯示的行   40
        endRow = (endRow > num)? num : endRow;    //40
        console.log(endRow);
        //遍歷顯示數據實現分頁
        for(var i=1;i<(num+1);i++){
            var irow = itable.rows[i-1];
            console.log(irow);
            if(i>=startRow && i<=endRow){
                irow.style.display = "block";
            }else{
                irow.style.display = "none";
            }
        }
        var pageEnd = document.getElementById("pageEnd");
        var tempStr = "共"+num+"條記錄 分"+totalPage+"頁 當前第"+currentPage+"頁";
        if(currentPage>1){
            tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首頁</a>";
            tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一頁</a>"
        }else{
            tempStr += "首頁";
            tempStr += "<上一頁";
        }

        if(currentPage<totalPage){
            tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一頁></a>";
            tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾頁</a>";
        }else{
            tempStr += "下一頁>";
            tempStr += "尾頁";
        }

        document.getElementById("barcon").innerHTML = tempStr;

    }
</script>
</body>
</html>

然後是自己根據案例，改動：

 var str ="";
		function setBuildingBoxInfo(){
            var unitName = arguments[0].name;
            $.ajax({
                url:'http://localhost:8080/grid/block/getUnitByUnitName.do',
                type:'post',
                data:{"unitName":unitName},
                dataType:'json',
                success:function (result) {
                    var nums = result.floorCount;
//                    for(var i=1;i <= result.floorCount;i++){
//                       str += "<li><a href='javascript:parent.floorOne(\""+unitName+"\","+i+");'>第"+i+"層</a></li>";
//                    }
                    str = goPage(1,5,nums,unitName);
                    map.setPopListHtml(str);

                    map.setPopTabHtml("樓層列表");
//                    map.setPopAdbHtml("<a style='color: #fff;' href='javascript:parent.goPage(1,6,"+nums+",\""+unitName+"\");'>上一頁</a>  <a style='color: #fff;' href='javascript:parent.goPage(1,6,"+nums+",\""+unitName+"\");'>下一頁</a>");
                    str = "";
                    parent.str = "";
                }
            });
        }

var popStr = "";
    function floorOne(unitName,houseNum){
        $.ajax({
            url:'http://localhost:8080/grid/pop/getPopListByHouseNum.do',
            type:'post',
            data:{"unitName":unitName,"houseNum":houseNum},
            dataType:'json',
            success:function(result){
                if(result != ""){
                    for(var i=0;i<result.length;i++){
                        popStr += "<li><a href='javascript:parent.getPopData(\""+result[i].popId+"\",\""+result[i].popName+"\",\""+result[i].popSex+"\","+result[i].popTel+");'>"+result[i].popName+"</a></li>";
                    }
                }else{
                    popStr += "<li>暫無人口信息!</li>";
                }
                map.setPopTabHtml("人口列表");
                map.setPopListHtml(popStr);
                parent.popStr = "";
            }
        });
    }

    //上一頁，下一頁函數
    function goPage(pno,pSize,nums,unitName){
        var str = "";
        var totalPage = 0;//總頁數
        var pageSize = pSize;//每頁多少條
        //總共分多少頁
        if(nums/pageSize > parseInt(nums/pageSize)){
            totalPage = parseInt(nums/pageSize)+1;
        }else{
            totalPage = parseInt(nums/pageSize);
        }
        var currentPage = pno; //當前頁
        //開始顯示的行
        var startRow = (currentPage - 1) * pageSize + 1;
        //結束顯示的行
        var endRow = currentPage * pageSize;
        endRow = endRow > nums ? nums : endRow;
        for(var i=1;i<(nums+1);i++){
            if(i >= startRow && i <= endRow){
                str += "<li style='display: block'><a href='javascript:parent.floorOne(\""+unitName+"\","+i+");'>第"+i+"層</a></li>";
            }else{
                str += "<li style='display: none'><a href='javascript:parent.floorOne(\""+unitName+"\","+i+");'>第"+i+"層</a></li>";
            }
        }
//        str += "<li><b style='color: #fff'>共"+nums+"條記錄 分"+totalPage+"頁 當前第"+currentPage+"頁</b></li>";
        if(currentPage > 1){
//            str += "<li><a href='#' onClick='goPage("+(1)+",\""+psize+"\")'>首頁</a></li>";
            str += "<li><a href='javascript:parent.map.setPopListHtml(parent.parent.goPage("+(currentPage-1)+",\""+pSize+"\","+nums+",\""+unitName+"\"));'>上一頁</a></li>";
        }else{
//            str += "<li><b>首頁</b></li>";
            str += "<li><b>上一頁</b></li>";
        }
        if(currentPage < totalPage){
            str += "<li><a href='javascript:parent.map.setPopListHtml(parent.parent.goPage("+(currentPage+1)+",\""+pSize+"\","+nums+",\""+unitName+"\"));'>下一頁</a></li>";
//            str += "<li><a href='#' onClick='goPage("+(totalPage)+",\""+psize+"\")'>尾頁</a></li>";
        }else{
            str += "<li><b>下一頁</b></li>";
//            str += "<li><b>尾頁</b></li>";
        }

        return str;
    }

隨手記--js頁面分頁（不需要後臺mySql使用limit）

個人記錄遞歸查詢菜單欄，多級別返回。

記錄一個工具類，作用的將List集合裏的map對象裏面的value的值，去重！

mysql查詢xx天以內的數據

關閉彈窗的其他另類辦法

java 正則表達式獲取img 的width屬性並修改它

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結