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