J S 实现分页

J S 实现分页
首先先看效果图：


实现思路：
首先要获取到表格中有多少行记录，每页显示的行数。我这里每页三行。然后在填加的操作里加入下面代码。

var tbody=document.getElementById("tbody");
		var trs=tbody.getElementsByTagName("td");
		
        if(trs.length>3){
			goPage(1,3)
		}

因为刚开始没有记录，当有记录的时候触发事件，执行分页函数。这时根据自己每页显示的行数进行判断，比如我要每页显示三行，那么就是trs.length>3、如果每页要显示，则判断>5即可。
  
   然后比较重要的就是怎样只显示需要的内容，这里用到style.display=”@”;当@地方是none时为隐藏，为block时是显示。代码中定义了每页记录的开始位置、和结束位置。当遍历所有行时，满足在开始位置和结束位置之间的为block 相反为 none不显示。

   下面是分页的主题代码：
 

 function goPage(pno, psize){
    
        var itable = document.getElementById("tusers");
        
        var num = itable.rows.length;//表格行数
        var totalPage = 0;//总页数
        var pageSize = psize;//每页显示行数
        if ((num - 1) / pageSize > parseInt((num - 1) / pageSize)) {
        
            totalPage = parseInt((num - 1) / pageSize) + 1;
            
        }
        else {
        
            totalPage = parseInt((num - 1) / pageSize);
            
        }
        
        var currentPage = pno;//当前页数
        var startRow = (currentPage - 1) * pageSize + 1;//开始显示的行   
        var endRow = currentPage * pageSize + 1;//结束显示的行   
        endRow = (endRow > num) ? num : endRow;
        
        //前三行始终显示
        
        for (i = 0; i < 1; i++) {
        
            var irow = itable.rows[i];
            
            irow.style.display = "block";
            
        }
        
        
        //遍历所有行，满足条件的显示，否则不显示
        for (var i = 1; i < num; i++) {
        
            var irow = itable.rows[i];
            
            if (i >= startRow && i < endRow) {
            
                irow.style.display = "block";
                
            }
            else {
            
                irow.style.display = "none";
                
            }
            
        }
        
        var pageEnd = document.getElementById("pageEnd");
        
        var tempStr = "共" + (num - 1) + "条记录 分" + totalPage + "页 当前第" + currentPage + "页";
        
        if (currentPage > 1) {
        
            tempStr += "<a href=\"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\">上一页</a>"
            
        }
        else {
        
            tempStr += "上一页";
            
        }
        
        if (currentPage < totalPage) {
        
            tempStr += "<a href=\"#\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一页</a>";
            
        }
        else {
        
            tempStr += "下一页";
            
        }
        
        if (currentPage > 1) {
        
            tempStr += "<a href=\"#\" onClick=\"goPage(" + (1) + "," + psize + ")\">首页</a>";
            
        }
        else {
        
            tempStr += "首页";
            
        }
        
        if (currentPage < totalPage) {
        
            tempStr += "<a href=\"#\" onClick=\"goPage(" + (totalPage) + "," + psize + ")\">尾页</a>";
            
        }
        else {
        
            tempStr += "尾页";
            
        }
        
        document.getElementById("barcon").innerHTML = tempStr;
        
        
        
}