这篇文章给大家分享的是有关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+""
+"/activity_edit.action?id="+info[i].id+"'>编辑"
+""
$("#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
