spring mvc+ajax分页[通俗易懂]

大家好，又见面了，我是全栈君。

分页大致思路：页面每次把当前页传到后台并获得从后台传过来的json数据，解析后布局到这个页面上。

1.服务端代码：

@Controller public class MemcachedContrller { @Autowired private MemcacheReadService memcacheRead ; private static final Logger LOG = Logger.getLogger(MemcachedContrller.class); //页面初始化 @RequestMapping(value=”/memcached”,method={RequestMethod.GET,RequestMethod.POST}) public ModelAndView memcachedDisplay() { list.clear(); getMemcachedAll(); return new ModelAndView(“/memcached/memcachedShow”); } //运行上一页、下一页等操作时候运行 @RequestMapping(value = “/memcached/h2”, method = { RequestMethod.POST}) @ResponseBody public List h2(HttpServletRequest request, HttpServletResponse response) throws Exception { String dt=request.getParameter(“dt”); int current=Integer.parseInt(dt); return result(current); } //页面刷新的时候运行 @RequestMapping(value = “/memcached/h3”, method = { RequestMethod.POST}) @ResponseBody public List h3(HttpServletRequest request, HttpServletResponse response) throws Exception { String dt=request.getParameter(“dt”); int current=Integer.parseInt(dt); // System.out.println(dt); list.clear(); //清空集合中全部数据 getMemcachedAll();//获取最新的memcached数据 return result(current); } List list = new ArrayList(); //获取memcached数据 public List getMemcachedAll(){ /*for(int i=0;i<10000;i++){ JsonData p= new JsonData(); p.setGIX_X(“a”+i); p.setId(“1″+i); p.setGIY_Y(“a_b”+i); list.add(p); } return list;*/ Map<String,String> data=memcacheRead.read(); Set<String> set=data.keySet(); Iterator iter = set.iterator(); int i=0; List list = new ArrayList(); while(iter.hasNext()){ String key = (String)iter.next(); if(memcacheRead.get(key)!=null){ /*if(i==5) break; i=i+1; System.out.println(key);//获取key System.out.println(get(key));//获取缓存中key相应的value*/ if(i==100) break; i=i+1; String[] strSplit=memcacheRead.get(key).toString().split(“–“); JsonData p= new JsonData(); p.setGIX_X(strSplit[0]); p.setId(key); p.setGIY_Y(strSplit[1]); list.add(p); } } return list; //return memcacheRead.getAllValue(); } //将结果集处理后返回 public List result(int dt){ int pageSize=40; ArrayList list2 = new ArrayList(); Page pg=new Page(list.size(),dt,pageSize); PageMessage pm=new PageMessage(); pm.setPagecount(pg.getPagecount()); if(dt<pg.getPagecount()){ for(int i=(dt-1)*40;i<dt*40;i++){ list2.add(list.get(i)); }} else{ for(int i=(dt-1)*40;i<list.size();i++){ list2.add(list.get(i)); } } list2.add(pm); return list2; }

}

2.前端代码：

morePage.css

body{ font-size:18px; text-align:30%; } table{ border-collapse:collapse; } li{ list-style:none; border:1px solid; width:20px; height:20px; text-align:center; margin:5px; padding:2px; float:left; cursor:pointer; } #dataDisplay{ margin-left:30%; margin-top:20px; }

js:

var current=0; var t=0; function test2(dt){ window.t=dt; $.ajax({ url:”/bdms-web/memcached/h2?

dt=”+dt, type:’POST’, dataType:’json ‘, timeout:2000, cache:false, error:function(resultData){ alert(“xml”); },

success:function(resultData){ showPage(resultData,dt); } })}

function update(dt){ //window.t=dt; $.ajax({ url:”/bdms-web/memcached/h3?

dt=”+dt, type:’POST’, dataType:’json ‘, timeout:2000, cache:false, error:function(resultData){ alert(“xml”); },

success:function(resultData){ showPage(resultData,dt); } })}

function showPage(resultData,dt){ var fristpagehtml; var prevpagehtml; var nextpagehtml; var lastpagehtml; var gopagehtml; var length =resultData.length; var t=resultData[length-1].pagecount; gopagehtml=”<input id=’edit_count’ size=’4′ type=’text’ /> <input type=’button’ value=’go’ onclick=’test3();’/>”; fristpagehtml = “<a onclick=’test2(“+(0+1)+”);’ href=’javascript:void(0);’>首页</a>”; if((dt-0)<=1){ prevpagehtml = “<a>上一页</a>”; }else{ prevpagehtml = “<a onclick=’test2(“+(dt-1)+”);’ href=’javascript:void(0);’>上一页</a>”; } if((dt-0)<(t-0)){ nextpagehtml = “<a onclick=’test2(“+(dt-0+1)+”);’ href=’javascript:void(0);’>下一页</a>”; }else{ nextpagehtml = “<a>下一页</a>”; } lastpagehtml = “<a onclick=’test2(“+t+”);’ href=’javascript:void(0);’>未页</a>”; var html = “<table border=1px style=’font-size: 12px; color: red; text-align:center’><tr><td width=’160′>ID</td><td width=’200′>GIX_X</td><td width=’160′>GIX_Y</td></tr>”; for(var i=0;i<resultData.length-1;i++){ html = html+ “<tr ><td>” +resultData[i].id+”</td><td>” +resultData[i].GIX_X+”</td><td>” +resultData[i].GIY_Y +”</td></tr>”; } html = html + “<tr ><td colspan=3 text-align=center>”+fristpagehtml+”&nbsp&nbsp”+prevpagehtml+”&nbsp&nbsp”+”共”+resultData[length-1].pagecount+”页&nbsp;当前第”+dt+”页”+”&nbsp&nbsp”+nextpagehtml+”&nbsp&nbsp”+lastpagehtml+”&nbsp&nbsp”+gopagehtml+”</td></tr>”; html = html+”</table>”; document.getElementById(“div”).innerHTML=html; }

function test3(){ var str=document.getElementById(“edit_count”).value; test2(str); } setInterval(‘update(window.t)’,1000*10); /*function tt() { alert(“hello”); } setInterval(‘tt()’,1000*15);*/ //setTimeout(‘tt()’,15000);

jsp:

memcachedShow.jsp

<%@ page language=”java” contentType=”text/html; charset=UTF-8″ pageEncoding=”UTF-8″%> <%@ taglib prefix=”c” uri=”http://java.sun.com/jsp/jstl/core” %> <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <html> <head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″> <title>Insert title here</title> <link rel=”stylesheet” type=”text/css” href=”<c:url value=”/style/css/morePage.css” />”/> <script type=”text/javascript” src=”<c:url value=”/js/jquery.js” />”></script> <script type=”text/javascript” src=”<c:url value=”/js/jquery.min.js” />”></script> <script type=”text/javascript” src=”<c:url value=”/js/AjaxPage.js” />”></script> <!–<script type=”text/javascript” src=”/script/AjaxPage.js”></script> –> </head> <body onload=’test2(1)’> <!– <p style=”text-align:center”><input type=”button” size=”10″ value=”提交” onclick=”validate();”/></p> –> <center> <div id=”div”> </div> </center> <!–<form action=”update” method=”post”><input type=”submit” value=”xml生成”></form> –>

</body> </html>

页面效果：

模拟后台数据：

//获取memcached数据 public List getMemcachedAll(){ for(int i=0;i<10000;i++){ JsonData p= new JsonData(); p.setGIX_X(“a”+i); p.setId(“1″+i); p.setGIY_Y(“a_b”+i); list.add(p); } return list;

｝

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/115468.html原文链接：https://javaforall.cn