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="/" mce_href="/""#/" onClick=/"goPage(" + (currentPage - 1) + "," + psize + ")/">上一页</a>" } else { tempStr += "上一页"; } if (currentPage < totalPage) { tempStr += "<a href="/" mce_href="/""#/" onClick=/"goPage(" + (currentPage + 1) + "," + psize + ")/">下一页</a>"; } else { tempStr += "下一页"; } if (currentPage > 1) { tempStr += "<a href="/" mce_href="/""#/" onClick=/"goPage(" + (1) + "," + psize + ")/">首页</a>"; } else { tempStr += "首页"; } if (currentPage < totalPage) { tempStr += "<a href="/" mce_href="/""#/" onClick=/"goPage(" + (totalPage) + "," + psize + ")/">尾页</a>"; } else { tempStr += "尾页"; } document.getElementById("barcon").innerHTML = tempStr; }