最近在做ES全文搜索，需要做个类似于百度搜索下面分页的组件。 找了很多，最后发现jquery.pagination实现分页很方便。
1、JSP页面
从http://www.zhangxinxu.com/jq/pagination_zh/下载对应的JS、CSS文件。
代码语言：javascript复制<%@ 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__" //分页的js中会自动把"__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、控制器
代码语言：javascript复制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;i<pageSize;i ) {
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
代码语言：javascript复制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、分页效果
