纯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+"页";
    }

 前端新手，多多指教