jQuery+AJAX实现纯js分页功能

使用jQuery的AJAX技术，在bootstrap的框架下搭建的纯js分页

bootstrap作为Twitter推的一款前端框架，效果个人还是觉得很不错的。这次只是拿来作为网页元素的css样式表使用，比较省力，效果也会比自己做要漂亮多了。

使用数据为单独的json文件data.json

 

[
    {
        "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);
		}
	})
});

 

 

 

 

 

posted @ 2015-03-21 20:05  SEC.VIP_网络安全服务  阅读(83)  评论(0)  编辑  收藏  举报