300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 前端通过Ajax请求从后台返回数据到页面显示 实现分页功能

前端通过Ajax请求从后台返回数据到页面显示 实现分页功能

时间:2023-01-24 05:29:48

相关推荐

前端通过Ajax请求从后台返回数据到页面显示 实现分页功能

本文纯属自己平时编代码时的总结,主要用于自己以后方便查看

后端controller代码

JsonMessage jsonMessage = new JsonMessage();//***********************经过一些处理将数据存储在map中********************Map<String,Object> map = new HashMap<String,Object>();//list中放返回的数据map.put("list", list);//pages为总页数map.put("pages",pages);//curpage表示当前页 map.put("curpage", curPage); jsonMessage.setObj(map);return jsonMessage;

前端处理

/* 翻页功能 */

ajax请求体内容{

//清空标签中的数据$(".pagenationul").html("");var obj = showPages(jsonmsg.obj.curpage,jsonmsg.obj.pages);for(var i=1;i<=jsonmsg.obj.pages;i++){//active作为标签用来标识当前页var st = i == jsonmsg.obj.curpage ? 'active' : '';var strpage;if(obj[i]){strpage ='<li><a class="'+st+'" href="javascript:void(0)">'+i+'</a></li>';}else{strpage ='<li><span class="'+st+'" href="javascript:void(0)">......</span></li>';if(i<jsonmsg.obj.curpage){i=jsonmsg.obj.curpage-4;}else{i=jsonmsg.obj.pages-1;}}$(".pagenationul").append(strpage);}$(".pagenationul a").on("click",function(){turnpage(this,client);}); }

}

showPage:

<script type="text/javascript"><!--页码处理 -->function showPages(curpage,total){var obj = new Array();obj[1]=1;obj[total]=1;if(total>=5){for(var i=2;i<total;i++){if(Math.abs(curpage-i)<=3){obj[i]=1;}}}else{for(var i=2;i<total;i++){obj[i]=1;}}return obj;}</script>

turnpage:

<script type="text/javascript">function turnpage(page,client){var curpage = 1;clickpage = page.text;$(".pagination li").each(function(index,item){if($(this).find("a").attr("class") == "active"){curpage = index + 1;}});if(curpage!=clickpage){ //如果点击也不等于当前页,责再次发起ajax请求matchlists(client);} }</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。