js分页效果
我的效果:
HTML:
JS:
/** * 分页函数 * pno--页数 * psize--每页显示记录数 * 分页部分是从真实数据行开始,因而存在加减某个常数,以确定真正的记录数 * 纯js分页实质是数据行全部加载,通过是否显示属性完成分页功能 **/ function goPage(pno,psize){ var itable = document.getElementById("idData"); var num = itable.children.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;//开始显示的行 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.children[i-1]; if(i>=startRow && i<=endRow){ irow.style.display = "block"; }else{ irow.style.display = "none"; } } var tempStr = ''; if(currentPage>1){ tempStr += '首页
';
tempStr += '上一页
'
}else{
tempStr += '首页
';
tempStr += '上一页
';
}
tempStr += ''+currentPage+'
';
if(currentPage下一页
';
tempStr += '尾页
';
}else{
tempStr += '下一页
';
tempStr += '尾页
';
}
tempStr += '第'+currentPage+'页/共'+totalPage+'页
';
document.getElementById("barcon").innerHTML = tempStr;
}
参考代码:
| user1 | 25 | 男 | 山西吕梁 |
| user2 | 25 | 男 | 山西吕梁 |
| user3 | 25 | 男 | 山西吕梁 |
| user4 | 25 | 男 | 山西吕梁 |
| user5 | 25 | 男 | 山西吕梁 |
| user6 | 25 | 男 | 山西吕梁 |
| user7 | 25 | 男 | 山西吕梁 |
| user8 | 25 | 男 | 山西吕梁 |
| user9 | 25 | 男 | 山西吕梁 |
| user10 | 25 | 男 | 山西吕梁 |
| user11 | 25 | 男 | 山西吕梁 |
| user12 | 25 | 男 | 山西吕梁 |
| user13 | 25 | 男 | 山西吕梁 |
| user14 | 25 | 男 | 山西吕梁 |
| user15 | 25 | 男 | 山西吕梁 |
| user16 | 25 | 男 | 山西吕梁 |
| user17 | 25 | 男 | 山西吕梁 |
| user18 | 25 | 男 | 山西吕梁 |
| user19 | 25 | 男 | 山西吕梁 |
| user20 | 25 | 男 | 山西吕梁 |
| user21 | 25 | 男 | 山西吕梁 |
| user22 | 25 | 男 | 山西吕梁 |
| user23 | 25 | 男 | 山西吕梁 |
| user24 | 25 | 男 | 山西吕梁 |
| user25 | 25 | 男 | 山西吕梁 |
| user26 | 25 | 男 | 山西吕梁 |
| user27 | 25 | 男 | 山西吕梁 |
| user28 | 25 | 男 | 山西吕梁 |
| user29 | 25 | 男 | 山西吕梁 |
| user30 | 25 | 男 | 山西吕梁 |