使用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分页功能
原文地址：http://www.cnblogs.com/moxiaowohuwei/p/7804544.html