我接触Jquery的时间算比较晚的,主要是因为工作中用的不多。后来转到一个做金融业务的项目组,日常工作内容变成了写网页,才慢慢的开始熟悉jquery。刚开始的时候很傻很天真,以为学了jquery就用不着js了,后来才发现,jquery的主要作用就是方便js访问dom。所以,单纯的了解jquery是没有什么实际用处的,同时掌握js才能做好一些开发工作。
刚刚讲了,jquery就是要用来做访问dom的活,所以,之前的js分页的小例子可以改改了。
<html>
<head>
<title>jquery分页</title>
</head>
<body>
<table id="dataTable" border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</table>
<input type="button" id="previous" value="上一页"/><input type="button" id="next" value="下一页"/>
</body>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
//分页数据
var data = [
{
name:"李渊",
age:60
}
,
{
name:"李世民",
age:40
}
,
{
name:"李建成",
age:42
}
];
var totalNum = data.length;
var pageSize = 1;
var pageNo = 1;
//计算总页数
var totalPage = totalNum%pageSize==0?totalNum/pageSize:parseInt(totalNum/pageSize)+1;
var tableDom = $("#dataTable");
function changePage(pageNo){
//绑定函数前一定要先解除按钮上一个绑定的触发函数,因为jquery是叠加绑定的,不会覆盖上一次的函数
$("#previous").unbind();
$("#next").unbind();
$("#previous").click(function(){
changePage(pageNo-1);
});
$("#next").click(function(){
changePage(pageNo+1);
});
turnPage(pageNo);
}
function turnPage(pNo){
//这里加入对页码的判断,大于总页数和小于0的页码,就是不合法的,直接返回。
if(pNo>totalPage||pNo<1){
return;
}
pageNo = pNo;//每次翻页开始前,都要更新当前页码变量,pageNo
//翻页第一步,清除表内数据,当然,表头一定要保留
clearTable();
//翻页第二步,计算新数据的在整个数据数据中的开始和结束下标
var beginPos = (pageNo-1)*pageSize;
var endPos = pageNo*pageSize;
//遍历数据数组,组装行对象
for(var i=beginPos;i<endPos;i++){
var rowStr = "<tr>";
rowStr += "<td>"+data[i].name+"</td>";
rowStr += "<td>"+data[i].age+"</td>";
rowStr += "</td>";
tableDom.append(rowStr);
}
}
function clearTable(){
tableDom.find("tr").not(":first").remove();
}
changePage(pageNo); //调用翻页入口函数,开始填充表格,绑定下一页上一页触发函数
});
</script>
</html>
怎么样,看起来要比js写的要优雅一些吧,而且,如果想要添加其他的分页特性,比如选择多行,添加样式,用jquery做起来就会感觉轻松很多。至于具体怎么做,下次再见。