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;

｝