首先,引入jquery和jquery.page文件
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="<%=basePath %>js/jquery.page.js"></script>
<link href="<%=basePath %>css/jquery.page.css" rel="stylesheet">
(因为我用的是ssm框架,为了能正确引用到js和css文件,这里的<%=basePath %>是我指定的路径,下面贴出来供参考)
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
接下来写body部分:
<body>
<table class="table table-striped">
<thead>
<tr>
<td>id</td>
<td>name</td>
<td>email</td>
<td>sex</td>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
<div id="pages"></div>
</body>
其中 <div id="pages"></div>就是显示分页的地方,引入了jquery.page.js和jquery.page.css后需在要分页的jsp中添加如下js代码:
$("#pages").Page({
totalPages: total/5,//total Pages
liNums: total,//the li numbers(advice use odd)
activeClass: 'activP', //active class style
//firstPage: '首页',//first button name
//lastPage: '末页',//last button name
prv: '<<',//prev button name
next: '>>',//next button name
hasFirstPage: false,//whether has first button
hasLastPage: false,//whether has last button
hasPrv: true,//whether has prev button
hasNext: true,//whether has next button
callBack : function(page){
//callBack function,page:active page
}
});
其中total是从后台传来的值,callBack:function(page){}中的page是点击的页数,这里写好后开始写java代码:
@RequestMapping("/list")
public String list(Model model){
List<User> users = userService.list();//查找所有用户
int total = users.size();//用户数量
model.addAttribute("total",total);
return "list";//返回list.jsp
}
/**
* 查出所有用户(分页)
* @param request
* @return
*/
@RequestMapping("/ajaxList")
@ResponseBody
public Map<String,Object> ajaxList(HttpServletRequest request){
//获取当前页数
int index = Integer.parseInt(request.getParameter("index"));
//获取每页记录数
int count = Integer.parseInt(request.getParameter("count"));
Map<String,Object> map =new HashMap<String, Object>();
List<User> list = userService.ajaxList(index,count);
map.put("userList",list);
return map;
}
最后,完善js代码,在之前的callBack:function(page){}里用ajax实现异步刷新:
callBack : function(page){
//callBack function,page:active page
$.ajax({
url:"ajaxList",
data:{"index":(page-1)*5,"count":5},//index:当前页数;count:每页记录数;
type:"POST",
dataType:"json",
success:function(data){
var userList = data.userList;
$("#tb").html("");
$.each(userList,function(i, item) {
var html = "<tr><td>"+item.id+"</td>"+"<td>"+item.username+"</td>"+"<td>"+item.email+"</td>"+"<td>"+item.sex+"</td>"+"<td></tr>";
$("#tb").append(html);
});
},
erro:function(){
alert("请稍后再试!");
}
});
此外,添加下面的代码,使得第一次进入页面时有值:
var total = ${total};
$(function(){
$.ajax({
url:"ajaxList",
data:{"index":0,"count":5},//index:当前页数;count:每页记录数;
type:"POST",
dataType:"json",
success:function(data){
var userList = data.userList;
$("#tb").html("");
$.each(userList,function(i, item) {
var html = "<tr><td>"+item.id+"</td>"+"<td>"+item.username+"</td>"+"<td>"+item.email+"</td>"+"<td>"+item.sex+"</td>"+"<td></tr>";
$("#tb").append(html);
});
},
erro:function(){
alert("请稍后再试!");
}
});
});
最后附上jquery.page.js和jquery.page.css的链接:
链接:https://pan.baidu.com/s/1KjYEuFJEWie8kg61PHPLIg 密码:zslg