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;