先说一下思路吧，普通的分页大家初学java就会了，其实加载更多也非常简单。jQuery中有 $(“#Loading”).before(data); 这个before方法，可以向id为Loading的元素前追加HTML，因此只要我们的controller或者action返回HTML并追加到该元素前就行了。在默认的情况下我们发送Ajax请求，如果后台返回某个页面，那么浏览器会自动将该页面的HTML代码返回给Ajax回调函数，我们只要将此HTML用和上面的before方法追加上就OK了。（加载更多页面就是前面那个绿色的“某个页面”，这个加载更多页面我们只要将原先的页面里面的for循环部分拷贝过来放在body中），好了我该上例子了！
controller：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| package com.htth.controller.api;
import java.util.List;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import com.htth.entity.UserInfo;
import com.htth.service.CommonService;
@Controller
@RequestMapping(“/test”)
public class TestController {
@Resource
private CommonService commonService;
@RequestMapping(value=“/list”)
public String list(Model model,HttpServletResponse response,HttpServletRequest request) throws Exception {
String hql=“from UserInfo”;
List<UserInfo> list=commonService.findByHql(hql, 1, 5);
model.addAttribute(“list”, list);
return “user/list”;
}
@RequestMapping(value=“/more”)
public String more(Model model,int currPage,HttpServletResponse response,HttpServletRequest request) throws Exception {
String hql=“from UserInfo”;
List<UserInfo> list=commonService.findByHql(hql,currPage, 5);
model.addAttribute(“list”, list);
return “user/more”;
}
}
|
用户列表页面：list.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| <%@ page language=“java” contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8”%>
<%@ taglib uri=“http://java.sun.com/jsp/jstl/core”; prefix=“c”%>
<%@ taglib uri=“http://java.sun.com/jsp/jstl/fmt”; prefix=“fmt”%>
<%@ taglib uri=“http://java.sun.com/jsp/jstl/functions”; prefix=“fn”%>
<%
String path = request.getContextPath(); ///silomallManager
String basePath = request.getScheme()+“://”+request.getServerName()+“:”+request.getServerPort()+path;//http://localhost:8080/silomallManager/
%>
<html>
<head>
<title>用户列表</title>
<script src=“http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js”;></script>
<script>
var stop=true;
var currPage=1;
$(window).scroll(function(){
totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
if($(document).height() <= totalheight){
if(stop==true){
stop=false;
currPage++;
setTimeout(function(){
$.post(“<%=path%>/test/more”,
{
currPage:currPage
},
function(data){
<span style=“color:#006600;”>$(“#Loading”).before(data); </span>
stop=true;
});
}, 3000);
}
}
});
</script>
</head>
<body>
<ul>
<li>加载更多测试</li>
<li>用户名 | 密码 | 注册时间 | </li>
<span style=“color:#000099;”><c:forEach var=“u” items=“${list}” varStatus=“xxl” begin=“0”>
<li>${u.loginName} | ${u.password} | ${u.buildTime} | </li>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
</c:forEach></span>
<span style=“color:#009900;”><div id=“Loading”>Loading…</div></span>
</ul>
</body>
</html>
|
加载更多页面：more.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <%@ page language=“java” contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8”%>
<%@ taglib uri=“http://java.sun.com/jsp/jstl/core”; prefix=“c”%>
<%@ taglib uri=“http://java.sun.com/jsp/jstl/fmt”; prefix=“fmt”%>
<%@ taglib uri=“http://java.sun.com/jsp/jstl/functions”; prefix=“fn”%>
<%
String path = request.getContextPath(); ///silomallManager
String basePath = request.getScheme()+“://”+request.getServerName()+“:”+request.getServerPort()+path;//http://localhost:8080/silomallManager/
%>
<html>
<head>
<title>加载更多</title>
</head>
<body>
<span style=“color:#000099;”><c:forEach var=“u” items=“${list}” varStatus=“xxl” begin=“0”>
<li>${u.loginName} | ${u.password} | ${u.buildTime} | </li>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
</c:forEach></span>
</body>
</html>
|
OK，两个页面，两个controller中的方法就完成了加载更多。不需要其他任何插件。