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