前端通过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>

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

前台ajax请求php后台返回成功却进error方法解决
前台ajax请求php后台返回成功却进error方法解决参考文章: (1)前台ajax请求php后台返回成功却进error方法解决 (2)https://www.cnblogs.com/anniey ...
ajax 取值返回map_springboot|前端发ajax请求到后台Controller及常见的坑
前端发ajax请求这块是web的基础,发web请求大概需要以下几步1.引用web相关的依赖2.前端页面引入jquery.js3.编写ajax请求4.编写对应的Controller 引入web相关的依 ...
php ajax 点击后刷新当前页面,ajax请求值后返回会刷新页面？
模板控制器模型我用$.post提交表单,如果登录成功直接将信息保存到session,如果失败返回失败原因. 我是在模态框上写的表单,把失败原因显示在模态框上.但是返回后会自动刷新并关闭模态框. ...
thyme leaf使用Ajax后台返回数据不能渲染
thyme leaf使用Ajax后台返回数据不能渲染问题描述:thyme leaf使用Ajax从后台请求数据,前端页面渲染时只能显示返回到字符串,而不能显示返回异步请求的页面问题原因: 问题描述: ...
js 动态生成html（js根据后台返回数据生成html页面中的table标签）（转义字符）
js 动态生成html table标签中内容js生成 html代码 js代码 js 动态生成html 触发事件传参字符转义 table标签中内容js生成 html代码 <div><t ...
ajax请求json和xml数据及对json和xml格式数据的解析
ajax请求json和xml数据及对json和xml格式数据的解析一.ajax请求json数据并解析 ajax的写法: json数据解析: 请求json经常出现的跨域报错: 二.ajax请求xml数 ...
解决通过调用后台接口实现Excel导出功能，后台返回数据乱码的问题
解决通过调用后台接口实现Excel导出功能,后台返回数据乱码的问题问题如下: 这导致我虽然成功导出文件,但文件受损打不开解决方案如下: 在调用接口加入: // 导出 export function ...
前台发送 ajax 请求到后台传递数组参数
前台发送 ajax 请求到后台,发现直接传递数组,后台是接收不到的,需要 ajax 加上一个 traditional 属性 var arr = ["a","b" ...
IE浏览器中访问jsp页面，页面不执行ajax请求，后台控制台报错
问题描述:IE浏览器中访问jsp页面,页面不执行ajax请求,后台控制台报错:java.lang.IllegalArgumentException: Invalid character found i ...

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

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

最新文章

热门文章