• 纯js实现分页


    /**
    *分页函数
    *pno--页数
    *psize--每页显示记录数
    *分页部分是从真实数据行开始,因而存在加减某个常数,以确定正真的记录数
    *纯js分页实质是数据行全部加载,通过是否显示属性完成分页功能
    **/
    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;//开始显示的行
         var endRow = (endRow > num) ? num:endRow;
         console.log(endRow);
    
         //遍历显示数据实现分页
         for (var i=1;i<(num+1);i++){
               var irow = itable.rows[i-1];
                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;
    
    }
         
  • 相关阅读:
    超级英雄Hero
    2019 CSP-J 游记(CQ LNBS考场 的退役之战)
    一文梳理Web存储,从cookie,WebStorage到IndexedDB
    一文梳理同源策略与跨域技术
    一文梳理JavaScript中的this
    一文梳理JavaScript 事件循环(Event Loop)
    简单梳理JavaScript垃圾回收机制
    一文梳理JS事件
    src与href
    深入理解CSS定位—浮动模型
  • 原文地址:https://www.cnblogs.com/nxl0908/p/7489376.html
Copyright © 2020-2023  润新知