前端之家收集整理的这篇文章主要介绍了
ajax 分页完全代码整理,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
/*ajax分页*/varpage_cur=1;//当前页vartotal_num,page_size,page_total_num;//总记录数,每页条数,总页数functiongetData(page){//获取当前页数据$.ajax({
type:'GET',url:处理数据地址,data:{
'page':page,'catid':'{$video_info.catid}'
},dataType:'json',success:function(json){
$("#ul_lists").empty();
total_num=json.total_num;//总记录数
page_size=json.page_size;//每页数量
page_cur=page;//当前页
page_total_num=json.page_total_num;//总页数
varli="";
varlist=json.list;
$.each(list,function(index,array){//遍历返回json
varcurid={$video_info.id};varcur=curid==array['id']?"class='cur'":"";
li+="<li"+cur+"><ahref='地址/id/"+array['id']+"'>"+array['title']+"</a><span>"+array['time']+"</span></li>";
});
$("#ul_lists").append(li);
},complete:function(){
getPageBar();//js生成分页,可用程序代替},error:function(){
alert("数据异常,请检查是否json格式");
}
});
}functiongetPageBar(){//js生成分页
if(page_cur>page_total_num)page_cur=page_total_num;//当前页大于最大页数
if(page_cur<1)page_cur=1;//当前页小于1
page_str="<span>共"+total_num+"条</span><span>"+page_cur+"/"+page_total_num+"</span>";
if(page_total_num>1){if(page_cur==1){//若是第一页
page_str+="<span>首页</span><span>上一页</span>";
}else{
page_str+="<span><ahref='javascript:void(0)'data-page='1'>首页</a></span><span><ahref='javascript:void(0)'data-page='"+(page_cur-1)+"'>上一页</a></span>";
}
if(page_cur>=page_total_num){//若是最后页
page_str+="<span>下一页</span><span>尾页</span>";
}else{
page_str+="<span><ahref='javascript:void(0)'data-page='"+(parseInt(page_cur)+1)+"'>下一页</a></span><span><ahref='javascript:void(0)'data-page='"+page_total_num+"'>尾页</a></span>";
}
}
$("#page").html(page_str);
}
$(function(){
getData(1);//默认第一页
$("#pagea").live('click',function(){//live向未来的元素添加事件处理器,不可用bind
varpage=$(this).attr("data-page");//获取当前页getData(page)
});
});
数据处理端就正常的接收参数查询数据然后返回json前台处理
原文链接:https://www.f2er.com/ajax/161221.html