SpringMVC+jquery.pagination分页显示

程裕强

发布于 2022-05-06 20:25:47

1.4K0

发布于 2022-05-06 20:25:47

文章被收录于专栏：大数据学习笔记

最近在做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__"  //分页的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、控制器

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

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;
    }


}