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

1、ajax 无刷新页面的好处：提供良好的客户体验，通过 ajax 在后台从数据库中取得数据并展示，取缔了等待加载页面而出现的空白状态；

2、那么，ajax 无刷新页面是运行在动态页面（.php）？还是静态页面（.html/.htm/.shtml）？答案是：静态页面；

3、实现原理：通过前端 js 脚本程序与 ajax 相结合取得从动态页面返回的数据，并显示。

现在什么都讲究一个无刷新，就连分页也是如此，下面是小编日常整理的关于一段无刷新代码，希望能够帮到大家。

代码如下:

一.html代码部分:

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

二.ajax代码部分:

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

以上代码是小编给大家介绍的ajax实现的无刷新分页，希望对大家有所帮助。