2020-12-24 10:05发布
一般传请求参数,页码(pageNum)和每页数量(pageSize)到后台计算,再返回响应数据,包括当前页数据的数组 + 总记录数(total)到前端。
ajax请求后台拿到json类型的数据后,可以在它的success回调方法中进行动态分页,也就是表格重绘,此时,我们需要得到的数据包括:查询得到的数据、数据总条数、总页数、当前页数,其中前三条可在后台获取,对于当前页数,需要从前端获取点击页数再通过请求传递给后台,后台做完相应处理后再传回给前端。/*** * @param page 当前页*/function getData(page){var schoolid = $("#schoolid option:selected").text();var apptype = $("#apptype option:selected").text();var appname = $("#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("");var str = "应用编号"+"学校名称"+"应用名称"+"应用分类"+"应用类型";for(var i=0;istr += ""+data.resultList[i].appid+""+data.resultList[i].schoolid+""+data.resultList[i].appname+""+data.resultList[i].app_departid+""+data.resultList[i].apptype+"";}$("#table").html(str); //重绘tablevar pageNum = data.pageNum; //获取得到的数据页数var curPage = data.curPage; //获取当前页str = "";/*若页数大于1则添加上一页、下一页链接*/if(data.pageNum>1){str = "上一页" }else{str = "";}/*循环输出每一页的链接*/for(var i=0;istr += ""+(parseInt(i)+1)+"";}if(str.indexOf("上一页")>-1){str += "下一页"+"共"+pageNum+"页";}else{str += "共"+pageNum+"页";}$(".turn_page").html(str);//把当前页码存到上一页、下一页的data-num属性中,这样可以在点击上一页或者下一页时知道应该跳到哪页$("#pre").attr("data-num",curPage);$("#next").attr("data-num",curPage);},error : function(data){alert("请求失败");}});}/*** 上一页点击事件*/function preEvent(){var curPage = $("#pre").attr("data-num");if(curPage<=1){$(this).attr('disabled',"true");}else{curPage = parseInt(curPage)-1;getData(curPage);}}/*** 下一页点击事件*/function nextEvent(){var curPage = $("#next").attr("data-num");var pageNum = $("#pageNum").text();if(curPage>=pageNum){$(this).attr('disabled',"true");}else{curPage = parseInt(curPage)+1;getData(curPage);}}对应的HTML代码注意:标签的href属性,如href=”[removed]void(0);οnclick=getData();” 要让原来的点击事件失去响应,重新给它定义点击事件,要给它加上[removed]void(0);这句话,若写的是href=”#”的话,点击默认会跳到页面顶部。 另外,ajax请求数据无刷新翻页是异步请求,所以标签的点击事件要写在它的属性里,如上例,若写在js当中,会造成 页面还没加载出来,事件就已经触发,导致没有任何响应。
ajax请求后台拿到json类型的数据后,可以在它的success回调方法中进行动态分页,也就是表格重绘,此时,我们需要得到的数据包括:查询得到的数据、数据总条数、总页数、当前页数,其中前三条可在后台获取,对于当前页数,需要从前端获取点击页数再通过请求传递给后台,后台做完相应处理后再传回给前端。 /** * * @param page 当前页 */ function getData(page){ var schoolid = $("#schoolid option:selected").text(); var apptype = $("#apptype option:selected").text(); var appname = $("#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(""); var str = "应用编号" +"学校名称" +"应用名称" +"应用分类" +"应用类型"; for(var i=0;i"; }else{ str += ""; } $(".turn_page").html(str); //把当前页码存到上一页、下一页的data-num属性中,这样可以在点击上一页或者下一页时知道应该跳到哪页 $("#pre").attr("data-num",curPage); $("#next").attr("data-num",curPage); }, error : function(data){ alert("请求失败"); } }); } /** * 上一页点击事件 */ function preEvent(){ var curPage = $("#pre").attr("data-num"); if(curPage<=1){ $(this).attr('disabled',"true"); }else{ curPage = parseInt(curPage)-1; getData(curPage); } } /** * 下一页点击事件 */ function nextEvent(){ var curPage = $("#next").attr("data-num"); var pageNum = $("#pageNum").text(); if(curPage>=pageNum){ $(this).attr('disabled',"true"); }else{ curPage = parseInt(curPage)+1; getData(curPage); } } 对应的HTML代码 注意:标签的href属性,如href=”[removed]void(0);οnclick=getData();” 要让原来的点击事件失去响应,重新给它定义点击事件,要给它加上[removed]void(0);这句话,若写的是href=”#”的话,点击默认会跳到页面顶部。 另外,ajax请求数据无刷新翻页是异步请求,所以标签的点击事件要写在它的属性里,如上例,若写在js当中,会造成 页面还没加载出来,事件就已经触发,导致没有任何响应。
分页器部分:
Ajax的请求部分:
ajax 主要是实现页面和 web 服务器之间数据的异步传输。Ajax 即Asynchronous Javascript And XML(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML 或者是 HTML(标准通用标记语言的子集)。Ajax 是一种...
不用担心这种问题的,你Java能学好,其他开发语言还能学不好吗,就业来说能力可能不是最主要的因素,但是你想走的更远,能力一定是第一位的。
最多设置5个标签!
一般传请求参数,页码(pageNum)和每页数量(pageSize)到后台计算,
再返回响应数据,包括当前页数据的数组 + 总记录数(total)到前端。
最好是点击一页就发一次请求
分页器部分:
Ajax的请求部分:
一般传请求参数,页码(pageNum)和每页数量(pageSize)到后台计算,
再返回响应数据,包括当前页数据的数组 + 总记录数(total)到前端。
相关问题推荐
ajax 主要是实现页面和 web 服务器之间数据的异步传输。Ajax 即Asynchronous Javascript And XML(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML 或者是 HTML(标准通用标记语言的子集)。Ajax 是一种...
不用担心这种问题的,你Java能学好,其他开发语言还能学不好吗,就业来说能力可能不是最主要的因素,但是你想走的更远,能力一定是第一位的。