java分页代码无刷新_实例代码讲解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

{

tbody_content +="

"

+"

"+(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

{

currentPage++ ;

}

queryForPages();

});

//尾页

$("#last").click(function(){

currentPage = totalPage;

queryForPages();

});

});

以上代码是小编给大家介绍的ajax实现的无刷新分页，希望对大家有所帮助。