实例代码讲解ajax实现的无刷新分页
这篇文章主要介绍了实例代码讲解ajax实现的无刷新分页的相关资料,需要的朋友可以参考下
1、Ajax 无刷新页面的好处：提供良好的客户体验，通过 Ajax 在后台从数据库中取得数据并展示，取缔了等待加载页面而出现的空白状态；
2、那么，Ajax 无刷新页面是运行在动态页面（.php）？还是静态页面（.html/.htm/.shtml）？答案是：静态页面；
3、实现原理：通过前端 JS 脚本程序与 Ajax 相结合取得从动态页面返回的数据，并显示。
现在什么都讲究一个无刷新，就连分页也是如此，下面是小编日常整理的关于一段无刷新代码，希望能够帮到大家。
代码如下:
一.html代码部分:
| 序号 | 标题 | 地点 | 已报名 | 类别 | 操作 |
|---|
二.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"+(i+1+(currentPage-1)*pageSize)+"" +""+info[i].title.substr(0,20)+" " +""+info[i].address.substr(0,6)+" " +""+info[i].quota_sign+"人 " +""+info[i].type+" " +"编辑 " +"" $("#t_body").html(tbody_content); } } else { $("#t_head").html(""); $("#t_body").html(""+info.msg+""); } } //清空数据 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 以上代码是小编给大家介绍的ajax实现的无刷新分页，希望对大家有所帮助。
标签：