加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

ajax 分页完全代码整理

发布时间:2020-12-16 03:28:05 所属栏目:百科 来源:网络整理
导读:650) this.width=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="复制代码" style="margin:0px;padding:0px;border:none;" src="http://common.cnblogs.com/images/copycode.gif"> /*ajax分页*/varpage_cur=1;//当前页vartotal_num,page_siz

复制代码

/*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前台处理

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读