【下载文档:  JS基于封装函数实现的表格分页完整示例.txt 】

---

JS基于封装函数实现的表格分页完整示例
本文实例讲述了JS基于封装函数实现的表格分页。分享给大家供大家参考，具体如下：
HTML代码：

测试编号1	25	单元格1	单元格2
测试编号2	25	单元格1	单元格2
测试编号3	25	单元格1	单元格2
测试编号4	25	单元格1	单元格2
测试编号5	25	单元格1	单元格2
测试编号6	25	单元格1	单元格2
测试编号7	25	单元格1	单元格2
测试编号8	25	单元格1	单元格2
测试编号9	25	单元格1	单元格2
测试编号10	25	单元格1	单元格2
测试编号11	25	单元格1	单元格2
测试编号12	25	单元格1	单元格2
测试编号13	25	单元格1	单元格2
测试编号14	25	单元格1	单元格2
测试编号15	25	单元格1	单元格2
测试编号16	25	单元格1	单元格2
测试编号17	25	单元格1	单元格2
测试编号18	25	单元格1	单元格2
测试编号19	25	单元格1	单元格2
测试编号20	25	单元格1	单元格2
测试编号21	25	单元格1	单元格2
测试编号22	25	单元格1	单元格2
测试编号23	25	单元格1	单元格2
测试编号24	25	单元格1	单元格2
测试编号25	25	单元格1	单元格2
测试编号26	25	单元格1	单元格2
测试编号27	25	单元格1	单元格2
测试编号28	25	单元格1	单元格2
测试编号29	25	单元格1	单元格2
测试编号30	25	单元格1	单元格2
测试编号31	25	单元格1	单元格2
测试编号32	25	单元格1	单元格2
测试编号33	25	单元格1	单元格2
测试编号34	25	单元格1	单元格2
测试编号35	25	单元格1	单元格2
测试编号36	25	单元格1	单元格2
测试编号37	25	单元格1	单元格2
测试编号38	25	单元格1	单元格2
测试编号39	25	单元格1	单元格2
测试编号40	25	单元格1	单元格2

script.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;//开始显示的行 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 pageEnd = document.getElementById("pageEnd");
var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
if(currentPage>1){
tempStr += "首页";
tempStr += "<上一页"
}else{
tempStr += "首页";
tempStr += "<上一页";
}
if(currentPagetempStr += "下一页>";
tempStr += "尾页";
}else{
tempStr += "下一页>";
tempStr += "尾页";
}
document.getElementById("barcon").innerHTML = tempStr;
}
使用在线HTML/CSS/JavaScript代码运行工具 http://tools.zwyuanma.com/code/HtmlJsRun测试运行效果如下：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。