jquery+json实现分页

基本方法：通过使用jquery向服务器发送一个ajax请求，获取json格式的数据，然后将数据拼凑成行，附加到表格的后面，通过使用jquery pagination插件实现分页。

页面需要引入的js文件：

<link href="jqueryPager/pagination.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jqueryPager/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jqueryPager/jquery.pagination.js"></script>

//页面加载时，进行绑定

$(function(){
    bind(0);
});

//点击分页时调用的函数，page_id为当前页的索引
function pageselectCallback(page_id, jq) {
    bind(page_id);
}

function bind(pageIndex)
{
    var trs="";
    $.ajax({
        type:"GET",
        url:"Handler1.ashx",
        data:"pageIndex="+(pageIndex+1),//传递页面索引
        dataType:"json",

        //发送请求前，显示加载动画        

        beforeSend:function(){$("#divload").show();$("#datas #Pagination").hide()},

        //请求完毕后，隐藏加载动画
        complete:function(){$("#divload").hide();$("#datas #Pagination").show()},
        success:function(msg){

            //将除表头以外的行移除
            $("#datas tr:gt(0)").remove();
            var json=msg.table;
            $.each(json,function(index,data){
                  trs += "<tr><td>" + data.ID + "</td><td>"
                  + data.FirstName + "</td><td>" + data.LastName
                  + "</td><td>" + data.Note + "</td></tr>";
            });

            //将创建的新行附加在表格中
            $("#datas").append(trs);
            //设置表格除表头外，奇偶行的样式
            $("#datas tr:gt(0):odd").attr("class", "odd");
            $("#datas tr:gt(0):even").attr("class", "enen");
            //设置鼠标停留在某一行的样式
            $("#datas tr:gt(0)").hover(function(){
                    $(this).addClass('mouseover');
                },function(){
                    $(this).removeClass('mouseover');
                });
        }
        });

        //调用分页函数，将分页插件绑定到id为Pagination的div上
        $("#Pagination").pagination(<%=recordCount%>, { //recordCount在后台定义的一个公有变量，通过从数据库查询记录进行赋值，返回记录的总数
        callback: pageselectCallback,  //点击分页时，调用的回调函数
        prev_text: '« Previous',  //显示上一页按钮的文本
        next_text: 'Next »',  //显示下一页按钮的文本
        items_per_page:20,  //每页显示的项数
        num_display_entries:6,  //分页插件中间显示的按钮数目
        current_page:pageIndex,  //当前页索引
        num_edge_entries:2  //分页插件左右两边显示的按钮数目
        });

}

 

页面html代码：

<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse" align="center">
  <tr>
   <th>用户ID</th> 
   <th>用户姓氏</th>
   <th>用户名字</th>
   <th>备注</th>
  </tr>
</table>

//显示加载动画
<div id="divload" style="text-align:center">
    <img src="ajax-loader.gif" />
</div>

//显示分页插件
<div id="Pagination" class="digg" ></div>