jquey分页

来源：互联网发布：淘宝站外活动怎么报编辑：程序博客网时间：2024/05/22 00:53

我接触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做起来就会感觉轻松很多。至于具体怎么做，下次再见。

0 0