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如下

 

	

	 

	        

	        

	            
ID
	            
Item Name
	            
Item Price
		    
Item Operate
	        
        	
	        
	        


	        
	    
	
	

	

	    

	      
	        «
	      
	    
	
	  

	   
	  
	  

	  	

	      
	        »
	      
	    
	  
	

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;

			//绘制数据table
			if(pageTotal==1){
				for(var i=0;i"+
						data[i].name+
						""+
						data[i].stargazers_count+
						""+
						data[i].forks_count+
						""+
						data[i].description+
						"")
					);
				}
			}else{
				for(var i=0;i"+
						data[i].name+
						""+
						data[i].stargazers_count+
						""+
						data[i].forks_count+
						""+
						data[i].description+
						"")
					);
				}

				//绘制页面ul
				for(var i=1;i"+i+"
")
					);
				}
			}
		}
	});
}
//翻页
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"+
						data[i].name+
						""+
						data[i].stargazers_count+
						""+
						data[i].forks_count+
						""+
						data[i].description+
						"")
					);
			}
			
		}
	});
}


$(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);
		}
	})
});