欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

SpringMVC+jquery.pagination分页显示

程序员文章站 2022-07-13 09:55:50
...

最近在做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;
    }


}

4、分页效果

SpringMVC+jquery.pagination分页显示