隨手記--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;
    }




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章