关于Ajax异步请求后台数据进行动态分页功能

2023-09-12 01:45:04 313

/** * *@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].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="

"+(parseInt(i)+1)+""; } if(str.indexOf("上一页")>-1){ str+="

" +"共"+pageNum+"页

共"+pageNum+"

"; } $(".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); } }

注意：标签的href属性，如href=”javascript:void(0);onclick=getData();”

要让原来的点击事件失去响应，重新给它定义点击事件，要给它加上javascript:void(0);这句话，若写的是href=”#”的话，点击默认会跳到页面顶部。

另外，ajax请求数据无刷新翻页是异步请求，所以标签的点击事件要写在它的属性里，如上例，若写在js当中，会造成页面还没加载出来，事件就已经触发，导致没有任何响应。

以上所述是小编给大家介绍的关于Ajax异步请求后台数据进行动态分页功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

关于Ajax异步请求后台数据进行动态分页功能

热门推荐

随机推荐