ajax实现的无刷新分页代码实例

<table class="table style-5"> 
  <thead id="t_head"> 
    <tr> 
     <th>序号</th> 
     <th>标题</th> 
     <th>地点</th> 
     <th>已报名</th> 
     <th>类别</th> 
     <th>操作</th> 
   </tr> 
</thead> 
<tbody id="t_body"> 
<!-- ajax填充列表 -->
</tbody> 
</table> 
<button id="firstPage">首页</button> 
<button id="previous">上一页</button> 
<button id="next">下一页</button> 
<button id="last">尾页</button>

var pageSize = "10";//每页行数 
var currentPage = "1";//当前页 
var totalPage = "0";//总页数 
var rowCount = "0";//总条数 
var params="";//参数 
var url="activity_list.action";//action 
$(document).ready(function(){//jquery代码随着document加载完毕而加载 
  //分页查询 
  function queryForPages()
  { 
    $.ajax({ 
     url:url, 
     type:‘post‘, 
     dataType:‘json‘, 
     data:"qo.currentPage="+currentPage+"&qo.pageSize="+pageSize+params, 
     success:function callbackFun(data)
     { 
       //解析json 
       var info = eval("("+data+")"); 
       //清空数据 
       clearDate(); 
       fillTable(info); 
     } 
   }); 
  } 
  //填充数据 
  function fillTable(info)
  { 
    if(info.length>1)
    { 
      totalPage=info[info.length-1].totalPage; 
      var tbody_content="";//不初始化字符串"",会默认"undefined" 
      for(var i=0;i<info.length-1;i++)
      { 
        tbody_content +="<tr>" 
        +"<td data-title=‘序号‘ >"+(i+1+(currentPage-1)*pageSize)+"</td>" 
        +"<td data-title=‘标题‘>"+info[i].title.substr(0,20)+"</td>" 
        +"<td data-title=‘地点‘>"+info[i].address.substr(0,6)+"</td>" 
        +"<td data-title=‘已报名‘>"+info[i].quota_sign+"人</td>" 
        +"<td data-title=‘类别‘>"+info[i].type+"</td>" 
        +"<td data-title=‘操作‘><a href=‘<%=request.getContextPath()%>/activity_edit.action?id="+info[i].id+"‘>编辑</a></td>" 
        +"</tr>" 
        $("#t_body").html(tbody_content); 
      } 
    }
    else
    { 
      $("#t_head").html(""); 
      $("#t_body").html("<div style=‘height: 200px;width: 700px;padding-top: 100px;‘ align=‘center‘>"+info.msg+"</div>"); 
    } 
  } 
 //清空数据 
  function clearDate()
  { 
    $("#t_body").html(""); 
  }
  //搜索活动 
  $("#searchActivity").click(function(){ 
    queryForPages();
  }); 
  //首页 
  $("#firstPage").click(function(){ 
    currentPage="1"; 
    queryForPages(); 
  }); 
  //上一页 
  $("#previous").click(function(){ 
    if(currentPage>1)
    { 
      currentPage-- ; 
    } 
    queryForPages(); 
  }); 
  //下一页 
  $("#next").click(function(){ 
    if(currentPage<totalPage)
    { 
      currentPage++ ; 
    } 
    queryForPages(); 
  }); 
  //尾页 
  $("#last").click(function(){ 
    currentPage = totalPage; 
    queryForPages(); 
  }); 
});