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 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>

</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

html 数据库一体机TData javascript java memcached

0 人点赞