var data = [
{
name:"李渊",
age:60
}
,
{
name:"李世民",
age:40
}
,
{
name:"李建成",
age:42
}
];
以及页面上的表和上一页下一页按钮
<table id="dataTable" border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</table>
<input type="button" id="previous" value="上一页"/><input type="button" id="next" value="下一页"/>
分页最重要的几个参数,页码,每页显示条数,下面定义一下:
var pageSize = 1;
var pageNo = 1;
还有上面的表和按钮,这里先取得他们的dom对象方便下面使用。
var tableDom = document.getElementById("dataTable");
var prePageButton = document.getElementById("previous");
var nextPageButton = document.getElementById("next");
变量的命名,可以随意,但是,起码自己要能看懂,对吧?
翻页无非就是根据页码来控制表格中的数据,所以,先定义一个turnPage函数,接收页码做参数,用于翻页
function turnPage(pageNo){}
每次翻页前,肯定得清空表格,所以,肯定都有下面这个函数,clearTable(),参数给不给无所谓了,如果要灵活一点,
可以传入像table dom或者id一类的参数,这里不传参数,因为前面已经获取了table对象了。
下面是这两个函数的具体实现,有简略的注释。
function turnPage(pNo){
pageNo = pNo;//更新全局的pageNo的值,细细想想,有什么作用呢?
//翻页第一步,清除表内数据,当然,表头一定要保留
clearTable();
//翻页第二步,计算新数据的在整个数据数据中的开始和结束下标
var beginPos = (pageNo-1)*pageSize;
var endPos = pageNo*pageSize;
//便利数据数组,组装行对象
for(var i=beginPos;i<endPos;i++){
var dataRow = data[i];
var name = dataRow.name;
var age = dataRow.age;
var rowGrid = tableDom.insertRow(1);
var col1 = rowGrid.insertCell(0);
var col2 = rowGrid.insertCell(1);
col1.innerHTML = name;
col2.innerHTML = age;
}
}
function clearTable(){
var tSize = tableDom.rows.length;
//从第二行开始,循环删除行行
for(var rn=1;rn<tSize;rn++){
tableDom.deleteRow(1);
}
}
有了上面这两个,可以来继续组装上一页和下一页函数
function nextPage(){
var nextPageNo = pageNo+1;
turnPage(nextPageNo);
}
function prePage(){
var prePageNo = pageNo-1;
turnPage(prePageNo);
}
是不是很清晰了?
页面载入的时候,虽然没有翻页,但是,表格得有数据吧?所以,得有下面这个函数。
function initTable(){
turnPage(pageNo);
prePageButton.addEventListener("onclick",prePage,false);
nextPageButton.addEventListener("click",nextPage,false);
}
同时还在翻页按钮上绑定了触发函数。
最后,当然是一切奇迹的开始,页面载入完成后,让我们的翻页工具开始主宰世界吧。
window.onload = function(){
initTable();
}
好了,一个简单的翻页js完成了,简陋是简陋了一点,但是基本的架构就是这样子了。如果加上jquery,
nextPage和prePage这两个函数就可以不要了,至于为什么,等下一章讲jquery分页工具就知道了。