最近在做ES全文搜索，需要做个类似于百度搜索下面分页的组件。 找了很多，最后发现jquery.pagination实现分页很方便。
1、JSP页面
从http://www.zhangxinxu.com/jq/pagination_zh/下载对应的JS、CSS文件。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分页测试</title>
<link rel="stylesheet" href="/elastic/pagination/pagination.css" />
<script type="text/javascript" src="/elastic/pagination/jquery.min.js"></script>
<script type="text/javascript" src="/elastic/pagination/jquery.pagination.js"></script>
<script type="text/javascript">
var pageNum = Number(${pageNum});
var totalCount = Number(${totalCount});
$(function(){
$("#Pagination").pagination(totalCount, {
callback: pageselectCallback,
prev_text: "前一页",
next_text: "后一页",
current_page : pageNum,
items_per_page : 10,
num_edge_entries: 1,
num_display_entries: 6,
link_to: "/elastic/test/page.do?index=__id__"
});
function pageselectCallback(index, jq) {
alert(index)
}
var html = "";
var data = ${users};
$.each(data,function(idx,obj){
var username=obj.username;
var password=obj.password;
var age=obj.age;
html +="用户名：<a href='#' target='_blank'>"+ username+"</a>，密码："+password+"，年龄："+age+"<br>";
});
$("#Searchresult").append(html);
});
</script>
</head>
<body>
<div id="Searchresult"></div><br>
<div id="Pagination" class="pagination"></div>
</body>
</html>
2、控制器
package controller
import java
.util.ArrayList
import java
.util.List
import org
.springframework.stereotype.Controller
import org
.springframework.web.bind.annotation.RequestMapping
import org
.springframework.web.bind.annotation.ResponseBody
import org
.springframework.web.servlet.ModelAndView
import
com.alibaba.fastjson.JSONArray
import bean
.UserBean
@Controller
@RequestMapping(
"/test")
public class TestController {
@RequestMapping(value =
"/page.do" )
@ResponseBody
public ModelAndView page(String index) {
//当前页
System
.out.println(
"页码："+index)
//注意：jquery
.pagination.js页码从
0开始
int pageNum =
0
if (index!=null&&Integer
.parseInt(index)>
0){
pageNum=Integer
.parseInt(index)
}
System
.out.println(
"确认页码："+pageNum)
//每一页的页数
int pageSize =
10
List<UserBean> users=new ArrayList<>()
for(int i=
0
users
.add(new UserBean(pageNum+
"_test"+i,
"pwd_test"+i,i+
20))
}
ModelAndView mv = new ModelAndView()
mv
.addObject(
"totalCount",
120)
mv
.addObject(
"pageNum",pageNum)
JSONArray jsonArray=new JSONArray()
jsonArray
.addAll(users)
mv
.addObject(
"users",jsonArray
.toString())
mv
.setViewName(
"pager")
return mv
}
}
3、Bean
package bean;
public class UserBean {
private Integer id;
private String username;
private String password;
private Integer age;
public UserBean() {}
public UserBean(String username, String password,
int age) {
this.username = username;
this.password = password;
this.age=age;
}
public Integer
getId() {
return id;
}
public String
getUsername() {
return username;
}
public String
getPassword() {
return password;
}
public Integer
getAge() {
return age;
}
public void setId(Integer id) {
this.id = id;
}
public void setUsername(String username) {
this.username = username;
}
public void setPassword(String password) {
this.password = password;
}
public void setAge(Integer age) {
this.age = age;
}
}
4、分页效果
