Heim > Web-Frontend > js-Tutorial > Jquery:ajax实现翻页无刷新功能代码_jquery

Jquery:ajax实现翻页无刷新功能代码_jquery

WBOY
Freigeben: 2016-05-16 17:26:55
Original
1336 Leute haben es durchsucht

不多说,直接贴代码:
下面是js部分:

复制代码 代码如下:

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 ; itbody_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(currentPagecurrentPage++ ;
}
queryForPages();
});
//尾页
$("#last").click(function(){
currentPage = totalPage;
queryForPages();
});

});

下面是html代码部分:
复制代码 代码如下:















序号 标题 地点 已报名 类别 操作





Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage