实例代码讲解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实现的无刷新分页，希望对大家有所帮助。