福州小程序开发_JS完成的简略分页功用示例

JS实现的简单分页功能示例       这篇文章主要介绍了JS实现的简单分页功能,涉及javascript事件响应及页面元素遍历、动态构造等相关操作技巧,需要的朋友可以参考下

本文实例讲述了JS实现的简单分页功能。分享给大家供大家参考,具体如下:

HTML部分:

 body onLoad="goPage(1,10);" 
 table id="idData" width="70%" 
 tr td user2 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user3 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user4 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 /table 
 table width="60%" align="right" 
 tr td div id="barcon" name="barcon" /div /td /tr 
 /table 

js部分:

 * 分页函数
 * pno--页数
 * 凡科抠图ize--每页显示记录数
 * 分页部分是从真实数据行开始,因而存在加减某个常数,以确定真正的记录数
 * 纯js分页实质是数据行全部加载,通过是否显示属性完成分页功能
function goPage(pno,凡科抠图ize){
 var itable = document.getElementById("idData");
 var num = itable.rows.length;//表格所有行数(所有记录数)
 console.log(num);
 var totalPage = 0;//总页数
 var pageSize = 凡科抠图ize;//每页显示行数
 //总共分几页
 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;//开始显示的行 31
 var endRow = currentPage * pageSize;//结束显示的行 40
 endRow = (endRow num) num : endRow; //40
 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 tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
 if(currentPage 1){
 tempStr += " a href=\"#\" "goPage("+(1)+","+凡科抠图ize+")\" 首页 /a 
 tempStr += " a href=\"#\" "goPage("+(currentPage-1)+","+凡科抠图ize+")\" 上一页 /a "
 }else{
 tempStr += "首页";
 tempStr += " 上一页";
 if(currentPage totalPage){
 tempStr += " a href=\"#\" "goPage("+(currentPage+1)+","+凡科抠图ize+")\" 下一页 /a 
 tempStr += " a href=\"#\" "goPage("+(totalPage)+","+凡科抠图ize+")\"  /a 
 }else{
 tempStr += "下一页 
 tempStr += "";
 document.getElementById("barcon").innerHTML = tempStr;

完整测试示例:

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd" 
 html xmlns="1999/xhtml" 
 head 
 meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 
 title  JS分页 /title 
 script 
 * 分页函数
 * pno--页数
 * 凡科抠图ize--每页显示记录数
 * 分页部分是从真实数据行开始,因而存在加减某个常数,以确定真正的记录数
 * 纯js分页实质是数据行全部加载,通过是否显示属性完成分页功能
function goPage(pno,凡科抠图ize){
 var itable = document.getElementById("idData");
 var num = itable.rows.length;//表格所有行数(所有记录数)
 console.log(num);
 var totalPage = 0;//总页数
 var pageSize = 凡科抠图ize;//每页显示行数
 //总共分几页
 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;//开始显示的行 31
 var endRow = currentPage * pageSize;//结束显示的行 40
 endRow = (endRow num) num : endRow; //40
 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 tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
 if(currentPage 1){
 tempStr += " a href=\"#\" "goPage("+(1)+","+凡科抠图ize+")\" 首页 /a 
 tempStr += " a href=\"#\" "goPage("+(currentPage-1)+","+凡科抠图ize+")\" 上一页 /a "
 }else{
 tempStr += "首页";
 tempStr += " 上一页";
 if(currentPage totalPage){
 tempStr += " a href=\"#\" "goPage("+(currentPage+1)+","+凡科抠图ize+")\" 下一页 /a 
 tempStr += " a href=\"#\" "goPage("+(totalPage)+","+凡科抠图ize+")\"  /a 
 }else{
 tempStr += "下一页 
 tempStr += "";
 document.getElementById("barcon").innerHTML = tempStr;
 /script 
 /head 
 body onLoad="goPage(1,10);" 
 table id="idData" width="70%" 
 tr td user1 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user2 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user3 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user4 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user5 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user6 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user7 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user8 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user9 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user10 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user11 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user12 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user13 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user14 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user15 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user16 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user17 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user18 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user19 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user20 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user21 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user22 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user23 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user24 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user25 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user26 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user27 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user28 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user29 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 tr td user30 /td td 25 /td td 男 /td td 山西吕梁 /td /tr 
 /table 
 table width="60%" align="right" 
 tr td div id="barcon" name="barcon" /div /td /tr 
 /table 
 /body 
 /html 

运行效果图:

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:测试一下运行效果

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》、《》及《》

希望本文所述对大家JavaScript程序设计有所帮助。