js实现分页

<html>
<head>
<title>splitpage Demo</title>
<script>
//还有错误
//js分页的思路：有一个总集合和一个当前的集合,当前的集合中始终都是要显示的对象
//点击上一页或下一页是清空当前集合和当前表格
//在在初始化表格当中给当前集合和表格当中填充数据(不要弄什么createDocumentFragment(若是当前一次表格当中的//显示的信息与下一次表格当中的信息不同的话(利用来排序除外,因为排序后的表格的内容与排序前的表格的内容还是//一样的,只是排序的形式不一样了),就会报错))
var myArray = [{"name":"tiger1","age":21},{"name":"tiger2","age":22},{"name":"tiger3","age":23}];//集合
var currentPage = 1;//当前页码
var totalPage = 0;//总页数
var pageSize = 2;//每页的信息条数
var totalRecords = myArray.length;//总消息条数
var currentArray = new Array();//当前集合装的元素
window.onload=function(){
initPageInfo();
initTable();
}
//初始化表格的信息
function initTable(){
//拿到tbody对象
var myTbody = document.getElementById("myTbody");
//遍历循环,拿到集合当中的元素
//把从总集合中的需要访问的元素拿到当前集合当中(注意点上一页或下一页是当前集合中的元素一定要删除)
demo();
//删除以前表格当中的数据
for(var i=0;i<myTbody.rows.length;i++){
myTbody.deleteRow(i);
}
//把当前集合中的内容追加到表格当中
for(var i=0;i<currentArray.length;i++){
var student = currentArray[i];
//创建tr对象
var new_tr = myTbody.insertRow(i);
var new_td1 = new_tr.insertCell(0);
var new_td2 = new_tr.insertCell(1);
new_td1.innerHTML = student.name;
new_td2.innerHTML = student.age;

//添加元素
new_tr.appendChild(new_td1);
new_tr.appendChild(new_td2);
myTbody.appendChild(new_tr);
}
} //初始化页面页码信息
function initPageInfo(){
totalPage = (totalRecords/pageSize==0)? totalRecords%pageSize : totalRecords%pageSize+1;
} //更改当前页
function changePage(info){
if(info=='forward'){
currentPage--;
if(currentPage<1){
currentPage = 1;
}
}else{
currentPage++;
if(currentPage>totalPage ){
currentPage = totalPage;
}
}
alert("当前页数是："+currentPage);
initTable();
} //初始化当前页面的信息
function demo(){
currentArray.length = 0;
for(var i=(currentPage-1)*pageSize;i<currentPage*pageSize;i++){
//拿到学生对象
var student = myArray[i];
if(student==undefined){
continue;
}
currentArray.push(student);
}
}
</script>
</head>
<body>
<input type="button" value="测试" onclick = "demo()"/><br/>
<table border="1" align="center">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="myTbody">
</tbody>
</table>
<center>
<a href="javascript:changePage('forward')">上一页</a> &nbsp;&nbsp;&nbsp;
<div id="pageNum" style="display: inline"></div>
&nbsp;&nbsp;&nbsp;
<a href="javascript:changePage('next')">下一页</a>
</center>
<div style="float:left;font-size: 20px;color: red" id="showDetail"></div>
</body>
</html>
好像没出效果,不知道是什么原因啊 
大家帮帮忙啊

解决方案 »

  1.   

    function changePage(info){
    if(info=='forward'){
    currentPage--;
    if(currentPage<1){
    currentPage = 1;
    }
    }else{
    currentPage++;
    if(currentPage>totalPage ){
    currentPage = totalPage;
    }
    }
    alert("当前页数是："+currentPage);
    initTable();
    }不是这样做的吗,主要是为了改变页数
    然后提示当前的页数
    initTable()方法主要是
    1.先在demo()方法当中给currentArray更新数据(只有当前页要显示的信息)
    2.然后就是删除原表格当中的数据了
    3.最后就是把currentArray的数据显示到页面上