純js實現數據分頁顯示

寫在前面：最近寫頁面時，后台返回數據，需要在前端進行數據分頁展示；看了很多前人寫的代碼，再自己改了下，最終實現效果；俗話說，前人種樹，后人乘涼，就是這個道理吧

數據分頁展示

這里是很簡單的后台數據展示之后，在前端用js代碼實現分頁；可以用ajax從后台獲取數據，然后再進行分頁展示

效果如下：

剛加載時的效果：

 點擊中間按鈕時的效果：

 點擊最后一頁出現的效果：

 代碼如下：

<!-- 列表 --> 
<table class="table table-hover table-striped" id="table_result">
        <thead>
            <tr>
                <th>日期</th>
                <th>小時</th>
                <th>溫度</th>
            </tr>
        </thead>
        <tbody id="result">
            <tr>
                <td>2017-01-10</td>
                <td>1</td>
                <td>20℃</td>
            </tr>
            <tr>
                <td>2018-01-10</td>
                <td>2</td>
                <td>25℃</td>
            </tr>
            <tr>
                <td>2019-01-10</td>
                <td>5</td>
                <td>28℃</td>
            </tr>
            <tr>
                <td>2020-01-10</td>
                <td>8</td>
                <td>30℃</td>
            </tr>
            <tr>
                <td>2020-05-10</td>
                <td>20</td>
                <td>20℃</td>
            </tr>
            <tr>
                <td>2020-10-10</td>
                <td>25</td>
                <td>15℃</td>
            </tr>
            <tr>
                <td>2019-12-10</td>
                <td>20</td>
                <td>27℃</td>
            </tr>
            <tr>
                <td>2020-01-28</td>
                <td>20</td>
                <td>20℃</td>
            </tr>
            <tr>
                <td>2017-01-10</td>
                <td>1</td>
                <td>20℃</td>
            </tr>
            <tr>
                <td>2018-01-10</td>
                <td>2</td>
                <td>25℃</td>
            </tr>
            <tr>
                <td>2020-01-10</td>
                <td>1</td>
                <td>20℃</td>
            </tr>
            <tr>
                <td>2018-01-10</td>
                <td>2</td>
                <td>25℃</td>
            </tr>
            <tr>
                <td>2019-01-10</td>
                <td>5</td>
                <td>28℃</td>
            </tr>
            <tr>
                <td>2020-01-10</td>
                <td>8</td>
                <td>30℃</td>
            </tr>
            <tr>
                <td>2020-05-10</td>
                <td>20</td>
                <td>20℃</td>
            </tr>
            <tr>
                <td>2020-10-10</td>
                <td>25</td>
                <td>15℃</td>
            </tr>
            <tr>
                <td>2019-12-10</td>
                <td>20</td>
                <td>27℃</td>
            </tr>
            <tr>
                <td>2020-01-28</td>
                <td>20</td>
                <td>20℃</td>
            </tr>
        </tbody>
    </table>
<!-- 分頁生成的頁碼在這里顯示 -->

<div class="col-sm-6">
　　<div class="dataTables_info" id="info"></div>
</div>
<div class="col-sm-6">

<div class="dataTables">

      <ul class="pagination" id="pagination">
　　　　　　// <li><a></a></li>
   　　</ul>
</div>

</div> 

 

       
 // 分頁功能
         goPage(1,1);
    function goPage(pno, psize) {
        var itable = document.getElementById("result");//通過ID找到表格
        var idecs=document.getElementById("info");
        var num = itable.rows.length;//表格所有行數(所有記錄數)
        var totalPage = 0;//總頁數
        var pageSize = psize;//每頁顯示行數
        //總共分幾頁(總頁數/每頁要顯示的行數)
        if (num%pageSize!=0) {
          totalPage = parseInt(num / pageSize) + 1;
        } else {
          totalPage = parseInt(num / pageSize);
        }

        var currentPage = pno;//當前頁數
        var startRow = (currentPage - 1) * pageSize + 1;//開始顯示的行 1
        var endRow = currentPage * pageSize;//結束顯示的行   3
        endRow = (endRow > num) ? num : endRow;

        for (var i = 1; i < num+1; i++) {  //遍歷所有數據,rows[i]是從0開始，但是后面與startRow做比較，所以i從1開始；
            var irow = itable.rows[i-1];  //i-1，數據重0開始顯示
            if (i >= startRow && i <= endRow) {
                irow.style.display = "table-row";

            } else {
                irow.style.display = "none";
            }
        }
        
        // 給DOM添加頁碼
        var tempStr = "";
        // 上一頁
        if (currentPage > 1) {   //若當前頁不是第一頁，則可以添加點擊事件跳轉到前一頁
          tempStr += "<li><a href=\"#\" onClick=\"goPage(" + 1 + "," + psize +")\">首頁</a></li>";
            tempStr += "<li><a href=\"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\"><上一頁</a></li>";
            
        } else {     //若當前頁是第一頁，則不添加點擊事件
          tempStr += "<li><a href=\"#\">首頁</a></li>";
            tempStr += "<li><a href=\"#\"><上一頁</a></li>";
            
        }
        // 中間頁 （這里的代碼仔細看，是通過if語句來判斷當前點擊的是哪一頁，再進行拼接省略號(...)，根據當前頁顯示頁碼的個數可以自己改）  
        if (totalPage<5) {
          for (var j = 1; j <= totalPage; j++) {
                tempStr += "<li><a href=\"#\" class=\"active\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a></li>";
            }
        }else if(totalPage>5){
          if (currentPage<5) {
            for (var j = 1; j <= 5; j++) {
                tempStr += "<li><a href=\"#\" class=\"active\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a></li>";
            }
            tempStr+="<li><a href=\"#\">...</a></li>";
          }else if(currentPage>=5){
            for (var j = 1; j <= 3; j++) {
                tempStr += "<li><a href=\"#\" class=\"active\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a></li>";
            }
            tempStr+="<li><a href=\"#\">...</a></li>";
            if (currentPage+1==totalPage) {
              for (var j=currentPage-2; j <= totalPage; j++) {  //當前頁點擊到倒數第二個頁碼時，...后面3個頁碼顯示出來
                tempStr += "<li><a href=\"#\" class=\"active\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a></li>";
              }
            }else if(currentPage==totalPage) {  //如果當前就是最后一頁，那么...后面顯示3個頁碼
              for (var j=currentPage-3; j <= totalPage; j++) {  
                tempStr += "<li><a href=\"#\" class=\"active\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a></li>";
              }
            }else{  //其他情況：總頁碼大於當前頁碼
              for (var j=currentPage; j <=totalPage-1; j++) {  
                tempStr += "<li><a href=\"#\" class=\"active\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a></li>";
              }
              tempStr+="<li><a href=\"#\">...</a></li>";
            }
          }
        }   
               
        // 下一頁
        if (currentPage < totalPage) {
            tempStr += "<li><a href=\"#\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一頁></a></li>";
            tempStr += "<li><a href=\"#\" onClick=\"goPage(" + totalPage + "," + psize +")\">尾頁</a></li>";
            
        } else {
           tempStr +="<li><a href=\"#\"><下一頁</a></li>";
           tempStr +="<li><a href=\"#\">尾頁</a></li>";
        }
        document.getElementById("pagination").innerHTML = tempStr;
        idecs.innerHTML="共"+num+"條記錄，分"+totalPage+"頁顯示，當前"+currentPage+"頁";
    }

 前端新手，多多指教