jQuery+AJAX实现纯js分页功能
Posted 莫笑我胡为
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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);
}
})
});
以上是关于jQuery+AJAX实现纯js分页功能的主要内容，如果未能解决你的问题，请参考以下文章
关键词搜索&分页功能的前端代码(ajax + jQuery)
jQuery 分页插件（jQuery.pagination.js）ajax 实现分页