jQuery+AJAX实现纯js分页功能
使用jQuery的AJAX技术，在bootstrap的框架下搭建的纯js分页
bootstrap作为Twitter推的一款前端框架，效果个人还是觉得很不错的。这次只是拿来作为网页元素的css样式表使用，比较省力，效果也会比自己做要漂亮多了。
使用数据为单独的json文件data.json
[plain] view plain copy
[
{
"name": "bootstrap-table",
"stargazers_count": "526",
"forks_count": "122",
"description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
},
...
]
把主要代码和过程总结一下
html页面index.html如下
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<div>
<table id="table" class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>Item Name</th>
<th>Item Price</th>
<th>Item Operate</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<nav align="center" id="page_nav">
<ul class="pagination" id="page_prev">
<li id="prev">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
</ul>
<ul class="pagination" id="page_ul">
</ul>
<ul class="pagination" id="page_next">
<li id="next">
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
js代码index.js如下
var pageTotal=0;//总页数
var rowTotal=0;//总行数
var currentPage=0;//当前页数
var startRow=0;//页开始行数
var endRow=0;//页结束行数
var pageSize=2;//每页行数
function page(){
$.ajax({
url:"data.json",
type:"POST",
dataType:"json",
timeout:1000,
error:function(){
alert("ajax error");
},
success:function(data){
rowTotal=data.length;
pageTotal=Math.ceil(rowTotal/pageSize);//上取整
currentPage=1;
<span style="white-space:pre"> </span>//绘制数据table
if(pageTotal==1){
for(var i=0;i<pageSize;i++){
$("#table tbody").append(
$("<tr><td>"+
data[i].name+
"</td><td>"+
data[i].stargazers_count+
"</td><td>"+
data[i].forks_count+
"</td><td>"+
data[i].description+
"</td></tr>")
);
}
}else{
for(var i=0;i<pageSize;i++){
$("#table tbody").append(
$("<tr><td>"+
data[i].name+
"</td><td>"+
data[i].stargazers_count+
"</td><td>"+
data[i].forks_count+
"</td><td>"+
data[i].description+
"</td></tr>")
);
}
<span style="white-space:pre"> </span>//绘制页面ul
for(var i=1;i<pageTotal+1;i++){
$("#page_ul").append(
$("<li><a href='#'>"+i+"</a><li>")
);
}
}
}
});
}
//翻页
function gotoPage(pageNum){
$.ajax({
url:"data.json",
type:"POST",
dataType:"json",
timeout:1000,
error:function(){
alert("ajax error");
},
success:function(data){
currentPage=pageNum;
startRow=pageSize*(pageNum-1);
endRow=startRow+pageSize;
endRow=(rowTotal>endRow)?endRow:rowTotal;
$("#table tbody").empty();
for(var i=startRow;i<endRow;i++){
$("#table tbody").append(
$("<tr><td>"+
data[i].name+
"</td><td>"+
data[i].stargazers_count+
"</td><td>"+
data[i].forks_count+
"</td><td>"+
data[i].description+
"</td></tr>")
);
}
}
});
}
$(function(){
page();
$("#page_ul li").live("click",function(){
var pageNum=$(this).text();
gotoPage(pageNum);
});
$("#page_prev li").live("click",function(){
if(currentPage==1){
}else{
gotoPage(--currentPage);
}
});
$("#page_next li").live("click",function(){
if(currentPage==pageTotal){
}else{
gotoPage(++currentPage);
}
})
});
