SSS项目专题（一）：分页查询

1.需求分析

$[外链图片转存失败(img-aZgAHKuA-1565268401747)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1564995573616.png)]$

简单的分页查询需要实现以上四个功能：①分页②左右翻页③自定义页面大小④跳转翻页

2.分页查询

①分页

public interface DepartDao extends JpaRepository<Depart,Long>,JpaSpecificationExecutor<Depart>{
}
//继承的JpaSpecificationExecutor接口具有分页功能

利用Specification类的对象来封装查询条件

//接口 匿名内部类 专门负责封装查询条件的
Specification specification= new Specification() {
            // root 要查询实体类
            // criteriaQuery 条件
            // CriteriaBuilder 对象. 用于创建 Criteria 相关对象的工厂. 当然可以从中获取到
            // Predicate 类型, 代表一个查询条件
            @Override
      public Predicate toPredicate(Root root, CriteriaQuery criteriaQuery, CriteriaBuilder cb) {
             Predicate p1 = cb.notEqual(root.get("id"), 15);     //条件1   id!=15
             Predicate p2 = cb.like(root.get("email"), "%163.com");   // 条件2 email like '%163.com'
                return cb.or(p1,p2);
            }
        };

PageRequest可以选择排序规则

Sort.Order order1=new Sort.Order(Sort.Direction.DESC, "id");  // 按id降序
Sort.Order order2=new Sort.Order(Sort.Direction.ASC, "age"); // 按age升序

Sort sort = new Sort(order1, order2); //Sort封装了排序规则

//分页条件对象
Pageable pageable = new PageRequest(pageIndex-1, pageSize,sort);

//specification查询条件封装的对象
//pageable分页条件
Page<Depart> page = userDao.findAll(specification,pageable);//带条件分页
//或取到当页数据集合
List<Depart> list = page.getContent();

Controller层，此处利用到了封装的分页工具类PageUtils

@RequestMapping("/list/{pageIndex}/{pageSize}")
public String getAllDepart(@PathVariable("pageIndex") int pageIndex,@PathVariable("pageSize") int pageSize, Model model){
    //获取部门总数
    int totalCount = ds.getTotalCount();
    List<Depart> depart = ds.getDepartByPage(pageIndex,pageSize);
    PageUtils<Depart> page= new PageUtils<>(pageIndex,pageSize,depart,totalCount);
    model.addAttribute("depart",page);
    return "departList";
}

分页工具类：

package com.sss.utils;

import java.util.List;
/**
 * 分页工具
 */
public class PageUtils<T> {
    private int pageIndex;//页标
    private List<T> list;//pageIndex页查询到的集合

    //根据totalCount和pageSize计算总页数
    private int pageSize;//每页显示的个数
    private int totalCount;//查询结果总数

    private int pageCount;//总页数
    private int startPage;//页面上显示的第一个页标
    private int endPage;//页面上现实化的最后一个页标

    public PageUtils() { }
    public PageUtils(int pageIndex, int pageSize, List<T> list, int totalCount) {
        this.pageIndex = pageIndex;
        this.pageSize = pageSize;
        this.list = list;
        this.totalCount = totalCount;
        if(totalCount%pageSize==0){
            this.pageCount=totalCount/pageSize;
        }else{
            this.pageCount=totalCount/pageSize+1;
        }

        if(pageCount<10){
            this.startPage=1;
            this.endPage=pageCount;
        }else{
            this.startPage=this.pageIndex-4;
            this.endPage=this.pageIndex+5;
            if(this.startPage<1){
                this.startPage=1;
                this.endPage=10;
            }
            if(this.endPage>this.pageCount){
                this.startPage=this.pageCount-9;
                this.endPage=this.pageCount;
            }
        }

    }

    public int getPageIndex() {
        return pageIndex;
    }

    public void setPageIndex(int pageIndex) {
        this.pageIndex = pageIndex;
    }

    public List<T> getList() {
        return list;
    }

    public void setList(List<T> list) {
        this.list = list;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(int totalCount) {
        this.totalCount = totalCount;
    }

    public int getPageCount() {
        return pageCount;
    }

    public void setPageCount(int pageCount) {
        this.pageCount = pageCount;
    }

    public int getStartPage() {
        return startPage;
    }

    public void setStartPage(int startPage) {
        this.startPage = startPage;
    }

    public int getEndPage() {
        return endPage;
    }

    public void setEndPage(int endPage) {
        this.endPage = endPage;
    }
}

前端页面，显示页标

<c:forEach begin="${depart.startPage}" end="${depart.endPage}" var="num">
    <c:if test="${num==depart.pageIndex}">
        <a href="#" style="color:mediumvioletred;font-weight: bold;">${num}</a>
    </c:if>
    <c:if test="${num!=depart.pageIndex}">
        <a href="${pageContext.request.contextPath}/dep/list/${num}/${depart.pageSize}">${num}</a>
    </c:if>
</c:forEach>

②左右翻页

向右翻页，向左翻页同理

//如果当前页不是第一页，就将请求的页标-1
<c:if test="${depart.startPage!=depart.pageIndex}">
<a href="${pageContext.request.contextPath}/dep/list/${depart.pageIndex-1}/${depart.pageSize}"  class="layui-laypage-prev " data-page="0">
    <i class="layui-icon">&lt;</i>
</a>
</c:if>

//如果当前页是第一页，就将请求的页标设置为1
<c:if test="${depart.startPage==depart.pageIndex}">
    <a href="${pageContext.request.contextPath}/dep/list/1/${depart.pageSize}"  class="layui-laypage-prev " data-page="0">
        <i class="layui-icon">&lt;</i>
    </a>
</c:if>

③页面大小调整

[外链图片转存失败(img-gERGHvoB-1565268401747)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1564996912647.png)]

 <select lay-ignore="" onchange="changePageSize(this)">
        <option value="3" ${depart.pageSize==3?"selected":""}>3 条/页</option>
      <option value="5" ${depart.pageSize==5?"selected":""}>5 条/页</option>
      <option value="8" ${depart.pageSize==8?"selected":""}>8 条/页</option>
      <option value="12" ${depart.pageSize==12?"selected":""}>12 条/页</option>
</select>

<script>
    //下拉框修改页面大小
    function changePageSize(select) {
        var pageSize=select.value;
        //发送请求后台需查询
        location.href="${pageContext.request.contextPath}/dep/list/1/"+pageSize;
    }
</script>

④跳转翻页

只需要获取跳转的页数，重新发送请求

 <input type="text" min="1" id="goPageIndex" class="layui-input">页
<button type="button" onclick="gopage();" class="layui-laypage-btn">确定</button>

function gopage() {
    var pageIndex=$("#goPageIndex").val();
    if(pageIndex>0&&pageIndex<=${depart.endPage}){
        location.href="${pageContext.request.contextPath}/dep/list/"+pageIndex+"/${depart.pageSize}";
    }else{
        alert("请输入正确的页码！");
    }
}
 gopage() {
    var pageIndex=$("#goPageIndex").val();
    if(pageIndex>0&&pageIndex<=${depart.endPage}){
        location.href="${pageContext.request.contextPath}/dep/list/"+pageIndex+"/${depart.pageSize}";
    }else{
        alert("请输入正确的页码！");
    }
}

来源：https://blog.csdn.net/qq_34971756/article/details/98884941

标签

分页