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

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;

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/115468.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • pycharm哪个版本_pycharm版本选择

    pycharm哪个版本_pycharm版本选择Pycharm各大版本Pycharm作为python最常见的IDE,常见的有三种版本专业版:功能强大,适合开发者,需要通过付费或学生认证才能使用社区版:可以供广大python爱好者免费使用,具备常用的python库,可以实现基本的python用法,用于试验在工作中出现的错误教育版:基于社区版发展而来,也是免费使用,其功能与社区版相似,但是更适合学生,新人学习,由教师可以创建工程、教学…

  • 最新版黑苹果MacOS 10.14 Mojave安装教程

    最新版黑苹果MacOS 10.14 Mojave安装教程安装分为三部分:1.制作安装U盘2.安装MacOS系统3.安装clover(四叶草)用到的安装工具(按用到的先后顺序):1.Clover_v2.4k_r4679.pkg2.CloverConfigurator.zip3.一般台式机都能使用的通用EFI下载链接:https://pan.baidu.com/s/1sk6tYbCZ0riy0I6…

  • Python爬虫入门项目

    Python是什么Python是著名的“龟叔”GuidovanRossum在1989年圣诞节期间,为了打发无聊的圣诞节而编写的一个编程语言。创始人GuidovanRossum是BBC出品英剧MontyPython’sFlyingCircus(中文:蒙提·派森的飞行马戏团)的狂热粉丝,因而将自己创造的这门编程语言命名为Python。人生苦短,我用python,翻译自”L…

  • Mac里配置maven环境变量

    Mac里配置maven环境变量从windows转IOS还是有点难度的,就如环境变量来说吧,整整配置了一天啊。说实话网上教程很多,也写的很全,但不是每个人遇到的情况都一样,所以就有我这样的情况出现了,按照网上的教程配了好久,一直不好使。现在我就记录下来,避免以后忘记了。。。先说明下我的问题,我是在fishshell下编辑的profile文件,就是编辑完保存后就会一直报错,不是文件里面“=”不支持,就是git命令不好…

  • 爬虫原理及应用

    https://www.cnblogs.com/luchun666/p/9394149.html链接:link…

  • 如何关闭笔记本小键盘_笔记本电脑怎么关键盘灯光

    如何关闭笔记本小键盘_笔记本电脑怎么关键盘灯光2016-12-0815:00:40您使用下面两个方法,都可以用来关闭触摸板:(1)请您“双击”触摸板左上角位置的小圆点,当指示灯为橙色时,表示触摸板关闭。(2)或者,请您点击开始—控制面板—鼠标—装置设…2017-01-0116:08:43笔记本的小键盘区一般是在右手边的字母区,是蓝色字的。和台式机一样,笔记本也是有一个NUMLOCK键的。就是小键盘区的开关(一般也是蓝…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号