实例代码讲解ajax实现的无刷新分页
1、Ajax无刷新页面的好处：提供良好的客户体验，通过Ajax在后台从数据库中取得数据并展示，取缔了等待加载页面而出现的空白状态；
2、那么，Ajax无刷新页面是运行在动态页面（.php）？还是静态页面（.html/.htm/.shtml）？答案是：静态页面；
3、实现原理：通过前端JS脚本程序与Ajax相结合取得从动态页面返回的数据，并显示。
现在什么都讲究一个无刷新，就连分页也是如此，下面是小编日常整理的关于一段无刷新代码，希望能够帮到大家。
代码如下:
一.html代码部分:
<tableclass="tablestyle-5"> <theadid="t_head"> <tr> <th>序号</th> <th>标题</th> <th>地点</th> <th>已报名</th> <th>类别</th> <th>操作</th> </tr> </thead> <tbodyid="t_body"> <!--ajax填充列表--> </tbody> </table> <buttonid="firstPage">首页</button> <buttonid="previous">上一页</button> <buttonid="next">下一页</button> <buttonid="last">尾页</button>
二.ajax代码部分:
varpageSize="10";//每页行数
varcurrentPage="1";//当前页
vartotalPage="0";//总页数
varrowCount="0";//总条数
varparams="";//参数
varurl="activity_list.action";//action
$(document).ready(function(){//jquery代码随着document加载完毕而加载
//分页查询
functionqueryForPages()
{
$.ajax({
url:url,
type:'post',
dataType:'json',
data:"qo.currentPage="+currentPage+"&qo.pageSize="+pageSize+params,
success:functioncallbackFun(data)
{
//解析json
varinfo=eval("("+data+")");
//清空数据
clearDate();
fillTable(info);
}
});
}
//填充数据
functionfillTable(info)
{
if(info.length>1)
{
totalPage=info[info.length-1].totalPage;
vartbody_content="";//不初始化字符串"",会默认"undefined"
for(vari=0;i<info.length-1;i++)
{
tbody_content+="<tr>"
+"<tddata-title='序号'>"+(i+1+(currentPage-1)*pageSize)+"</td>"
+"<tddata-title='标题'>"+info[i].title.substr(0,20)+"</td>"
+"<tddata-title='地点'>"+info[i].address.substr(0,6)+"</td>"
+"<tddata-title='已报名'>"+info[i].quota_sign+"人</td>"
+"<tddata-title='类别'>"+info[i].type+"</td>"
+"<tddata-title='操作'><ahref='<%=request.getContextPath()%>/activity_edit.action?id="+info[i].id+"'>编辑</a></td>"
+"</tr>"
$("#t_body").html(tbody_content);
}
}
else
{
$("#t_head").html("");
$("#t_body").html("<divstyle='height:200px;width:700px;padding-top:100px;'align='center'>"+info.msg+"</div>");
}
}
//清空数据
functionclearDate()
{
$("#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实现的无刷新分页，希望对大家有所帮助。