关于Ajax异步请求后台数据进行动态分页功能
ajax请求后台拿到json类型的数据后,可以在它的success回调方法中进行动态分页,也就是表格重绘,此时,我们需要得到的数据包括:查询得到的数据、数据总条数、总页数、当前页数,其中前三条可在后台获取,对于当前页数,需要从前端获取点击页数再通过请求传递给后台,后台做完相应处理后再传回给前端。
请看如下例子:
/** * *@parampage当前页 */ functiongetData(page){ varschoolid=$("#schoolidoption:selected").text(); varapptype=$("#apptypeoption:selected").text(); varappname=$("#appname").val(); $.ajax({ type:"POST", url:"pageAjax", dataType:"json", data:{'schoolid':schoolid,'apptype':apptype,'page':page,'appname':appname}, success:function(data){ console.log("成功了!"+data); $("#table").html(""); $(".turn_page").html(""); varstr=""; for(vari=0;i 应用编号" +" 学校名称" +" 应用名称" +" 应用分类" +" 应用类型 "+data.resultList[i].appid+" " +data.resultList[i].schoolid+" "+data.resultList[i].appname+" " +data.resultList[i].app_departid+" "+data.resultList[i].apptype+" "; } $("#table").html(str);//重绘table varpageNum=data.pageNum;//获取得到的数据页数 varcurPage=data.curPage;//获取当前页 str=""; /*若页数大于1则添加上一页、下一页链接*/ if(data.pageNum>1){ str=""; } $(".turn_page").html(str); //把当前页码存到上一页、下一页的data-num属性中,这样可以在点击上一页或者下一页时知道应该跳到哪页 $("#pre").attr("data-num",curPage); $("#next").attr("data-num",curPage); }, error:function(data){ alert("请求失败"); } }); } /** *上一页点击事件 */ functionpreEvent(){ varcurPage=$("#pre").attr("data-num"); if(curPage<=1){ $(this).attr('disabled',"true"); }else{ curPage=parseInt(curPage)-1; getData(curPage); } } /** *下一页点击事件 */ functionnextEvent(){ varcurPage=$("#next").attr("data-num"); varpageNum=$("#pageNum").text(); if(curPage>=pageNum){ $(this).attr('disabled',"true"); }else{ curPage=parseInt(curPage)+1; getData(curPage); } }
- " }else{ str="
上一页 "; } /*循环输出每一页的链接*/ for(vari=0;i
"; }else{ str+="共"+(parseInt(i)+1)+""; } if(str.indexOf("上一页")>-1){ str+=" - " +"共
下一页 "+pageNum+" 页"+pageNum+" 页
对应的HTML代码
注意:标签的href属性,如href=”javascript:void(0);onclick=getData();”
要让原来的点击事件失去响应,重新给它定义点击事件,要给它加上javascript:void(0);这句话,若写的是href=”#”的话,点击默认会跳到页面顶部。
另外,ajax请求数据无刷新翻页是异步请求,所以标签的点击事件要写在它的属性里,如上例,若写在js当中,会造成页面还没加载出来,事件就已经触发,导致没有任何响应。
总结
以上所述是小编给大家介绍的关于Ajax异步请求后台数据进行动态分页功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!