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

前端  /  管理员 发布于 4年前   278

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='//article/<%=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实现的无刷新分页，希望对大家有所帮助。