使用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);
}
})
});