html用js给文字自动分页,JS实现的简单分页功能示例

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

HTML部分：

user2	25	男	山西吕梁
user3	25	男	山西吕梁
user4	25	男	山西吕梁

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

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 += "首页";

tempStr += ""

}else{

tempStr += "首页";

tempStr += "

}

if(currentPage

tempStr += "下一页>";

tempStr += "尾页";

}else{

tempStr += "下一页>";

tempStr += "尾页";

}

document.getElementById("barcon").innerHTML = tempStr;

}

完整测试示例：

www.jb51.net 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

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 += "首页";

tempStr += ""

}else{

tempStr += "首页";

tempStr += "

}

if(currentPage

tempStr += "下一页>";

tempStr += "尾页";

}else{

tempStr += "下一页>";

tempStr += "尾页";

}

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	男	山西吕梁

运行效果图：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试一下运行效果

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