java - 分页 - 个人文章 - SegmentFault 思否

ssm配置无

StudentMapper.java

public interface StudentMapper {
    int queryCount();
    List<Student> queryAll(HashMap<String,Object> map);
}

StudentMapper.xml

<mapper namespace="cn.scitc.mapper.StudentMapper">
    <select id="queryAll" parameterType="Map" resultType="student">
        select id,name,birthday from student
        limit #{start},#{size}
    </select>
    <select id="queryCount" resultType="int">
        select count(*) from student
    </select>
</mapper>

Student.java

public class Student {
    package cn.scitc.pojo;

import java.util.Date;

public class Student {
    private Integer id;
    private  String name;
    private Date birthday;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Date getBirthday() {
        return birthday;
    }

    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }
}

}

PageBean.java

package cn.scitc.pojo;

import java.util.List;

public class PageBean<T> {
    private int currPage; //当前页
    //    private int totalPage;//总页数
    private int pageSize;//每页记录大小
    private int totalCount;//总记录
    private List<T> pageBean;//查询结果集

    public int getCurrPage() {
        return currPage;
    }

    public void setCurrPage(int currPage) {
        this.currPage = currPage;
    }

    public int getTotalPage() {
        int totalPage = totalCount / pageSize;
        return totalCount % pageSize == 0 ? totalPage : totalPage + 1;
    }

//    public void setTotalPage(int totalPage) {
//        this.totalPage = totalPage;
//    }

    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 List<T> getPageBean() {
        return pageBean;
    }

    public void setPageBean(List<T> pageBean) {
        this.pageBean = pageBean;
    }
}

StudentService.java

public interface StudentService {
    PageBean<Student> queryAll(Integer currPage);
}

StudentServiceImpl.java

@Service
public class StudentServiceImpl implements StudentService {
    @Autowired
    private StudentMapper studentMapper;
    @Override
    public PageBean<Student> queryAll(Integer currPage) {
        HashMap<String,Object> map = new HashMap<>();
       PageBean<Student> pageBean = new PageBean<>();
       //当前页
        pageBean.setCurrPage(currPage);
        //总记录数
        int totalCount = studentMapper.queryCount();
        pageBean.setTotalCount(totalCount);
        //每页记录数
        int pageSize = 5;
        pageBean.setPageSize(pageSize);

        //map设置值
        map.put("start",(currPage -1) * pageSize );
        map.put("size",pageBean.getPageSize());
        //查询结果
        List<Student> studentList = studentMapper.queryAll(map);
        pageBean.setPageBean(studentList);
        return pageBean;
    }
}

StudentController.java

@Controller
public class StudentController {
    @Autowired
    private StudentService studentService;
    @RequestMapping("/query")
    public String query(@RequestParam(value = "currPage",defaultValue = "1") Integer currpage, Model model){
        model.addAttribute("pageBean",studentService.queryAll(currpage));
        return "student";
    }
}

student.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<table border="1" align="center" style="width: 500px">
    <tr>
        <td>id:</td>
        <td>name:</td>
        <td>birthday:</td>
    </tr>
    <c:forEach items="${pageBean.pageBean}" var="student">
        <tr>
            <td><c:out value="${student.id}"/></td>
            <td><c:out value="${student.name}"/></td>
            <td><fmt:formatDate value="${student.birthday}" pattern="yyyy-MM-dd"/> </td>
        </tr>
    </c:forEach>
    
</table>
<table align="center">
    <td>
        <span>当前${pageBean.currPage}/${pageBean.totalPage}</span>
        <span>共${pageBean.totalCount}条记录</span>
        <span>
            <c:if test="${pageBean.currPage!=1}">
                <a href="<c:url value="/query?currPage=1"/>">[首页]</a>
                <a href="<c:url value="/query?currPage=${pageBean.currPage-1}"/>">上一页</a>
            </c:if>

            <c:choose>
                <%--总页不超过10--%>
                <c:when test="${pageBean.totalPage}< 10">
                    <c:set var="begin" value="1"/>
                    <c:set var="end" value="${pageBean.totalPage}"/>
                </c:when>
                <c:otherwise>
                    <c:set var="begin" value="${pageBean.currPage-5}"/>
                    <c:set var="end" value="${pageBean.currPage+4}"/>
                    <%--头溢出--%>
                    <c:if test="${begin<1}">
                        <c:set var="begin" value="1"/>
                        <c:set var="end" value="10"/>
                    </c:if>
                    <%--尾溢出--%>
                    <c:if test="${end > pageBean.totalPage}">
                        <c:set var="begin" value="${pageBean.totalPage-9}"/>
                        <c:set var="end" value="${pageBean.totalPage}"/>
                    </c:if>
                </c:otherwise>
            </c:choose>

            <%-- 循环遍历页码列表 --%>
            <c:forEach var="i" begin="${begin}" end="${end}">
                <c:choose>
                    <c:when test="${i eq pageBean.currPage}">
                        [${i}]
                    </c:when>
                    <c:otherwise>
                        <a href="<c:url value="/query?currPage=${i}"/>">${i}</a>
                    </c:otherwise>
                </c:choose>
            </c:forEach>

             <c:if test="${pageBean.currPage!=pageBean.totalPage}">
                 <a href="<c:url value="/query?currPage=${pageBean.currPage+1}"/>">下一页</a>
                 <a href="<c:url value="/query?currPage=${pageBean.totalPage}"/>">[尾页]</a>

             </c:if>
        </span>

    </td>
</table>
</body>
</html>

运行结果为：

js去写

         //我要显示5页
            // 1 2 [3] 4 5
            //总记录数
            var recordCount = data.data.articleCount;
            //总页数
            var pageCount = Math.ceil(recordCount / pageSize);
            if (pageIndex != 1) {
                var indexPageHtml =
                    `<a class="page-numbers" id="page-previous" href="/blog/index?page=${(pageIndex - 1)}">`
                    + `<i class="fa fa-angle-left"></i>`
                    + `</a>`
                    + `<a class="page-numbers" id="page-home" href="/blog/index?page=1">首页</a>`;
                $('.nav-links').append(indexPageHtml);
            }
            if (pageCount < 5) {
                var begin = 1;
                var end = pageCount;
            } else {
                var begin = (pageIndex - 3);
                var end = (pageIndex + 1);
                //头溢出
                if (begin < 1) {
                    begin = 1;
                    end = 5;
                }
                //尾溢出
                if (end > pageCount) {
                    begin = pageCount - 4;
                    end = pageCount;
                }
            }
            console.log("begin:" + begin);
            console.log("end:" + end);
            for (var i = begin; i <= end; i++) {
                if (i == pageIndex) {
                    $('.nav-links').append(`<span class="page-numbers current">${i}</span>`);
                } else {
                    $('.nav-links').append(`<a class="page-numbers"  href="/blog/index?page=${i}">${i}</a>`);
                }
            }

            if (pageIndex != pageCount) {
                var lastPageHtml =
                    `<a class="page-numbers" href="/blog/index?page=${pageCount}">尾页</a>`
                    + `<a class="page-numbers"href="/blog/index?page=${(parseInt(pageIndex) + 1)}">`
                    + `<i class="fa fa-angle-right"></i>`
                    + `</a>`
                $('.nav-links').append(lastPageHtml);
            }
        }

JPA + beetl实现分页

实体类

@Entity  
@Data  
public class Employees {  
    @Id  
 @GeneratedValue  private Integer employeeId;  
 private String  firstName;  
 private String lastName;  
 private String email;  
 private String phoneNumber;  
 private String jobId;  
 private Double salary;  
 private Double commissionPct;  
 private Integer managerId;  
 private Integer departmentId;  
 private Date hiredate;  
}

EmployeesDao

public interface EmployeesDao extends JpaRepository<Employees, Integer> {  
}

EmployeesService

public interface EmployeesService {  
  Page<Employees> findAll(Integer page);  
}

EmployeesServiceImpl

@Service  
public class EmployeesServiceImpl implements EmployeesService {  
    public static final Integer PAGE_SIZE = 10;  
  @Autowired  
  private EmployeesDao employeesDao;  

   @Override  
  public Page<Employees> findAll(Integer page) {  
  Pageable pageRequest = PageRequest.of(page-1, PAGE_SIZE);  
 return employeesDao.findAll(pageRequest);  
  }  
}

  
@Controller  
public class EmployeesController {  
  
  @Autowired  
  private EmployeesService employeesService;  

  @GetMapping("list/{page}")  
  public String page(@PathVariable Integer page,Model model){  
    if (page<1){  
        page = 1;  
    }  
  
  Page<Employees> employeesPage = employeesService.findAll(page);  
  
  model.addAttribute("empList",employeesPage.getContent());  
  model.addAttribute("page",page);  
  model.addAttribute("totalElements",employeesPage.getTotalElements());  
  model.addAttribute("totalPages",employeesPage.getTotalPages());  
 return "list.html";
}

list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1  style="text-align: center" >全部员工</h1>
<table style="margin: 0 auto;"  border="1">
    <tr>
        <td>顺序</td>
        <td>employeeId</td>
        <td>firstName</td>
        <td>lastName</td>
        <td>email</td>
        <td>phoneNumber</td>
        <td>jobId</td>
        <td>salary</td>
        <td>commissionPct</td>
        <td>managerId</td>
        <td>departmentId</td>
        <td>hiredate</td>
    </tr>
    <%
        for(emp in empList){
    %>
    <tr>
        <td>${empLP.index}</td>
        <td>${emp.employeeId}</td>
        <td>${emp.firstName}</td>
        <td>${emp.lastName}</td>
        <td>${emp.email}</td>
        <td>${emp.phoneNumber}</td>
        <td>${emp.jobId}</td>
        <td>${emp.salary}</td>
        <td>${emp.commissionPct}</td>
        <td>${emp.managerId}</td>
        <td>${emp.departmentId}</td>
        <td>${emp.hiredate,"yyyy-MM-dd"}</td>
    </tr>

    <%
    }
    %>


</table>

<table style="margin: 0 auto;"  >
    <td>
        <span>当前${page}/${totalPages}</span>
        <span>总记录数${totalElements}</span>
        <%
            if(page-1>=1){
        %>

        <span ><a href="${ctxPath}/list/${page-1}">上一页</a> </span>
      <% }%>
        <span ><a href="${ctxPath}/list/1">1</a> </span>

        <% if(page-3>1){%>
        <span>...</span>
        <%}%>


        <%

        /*
          要实现   1 ...  4 5 [6] 7 8  ... 30
        把1和30单独重循环中抽离出来
        4-8 共5页为循环列表
        以 3 为中心判断 (page- 3>1) 和 (page< totalPages - 3) 分别添加 ...
        */
            var start = 1;
            var end = 5;

        // 总页数不超过5

        if(totalPages<end){
            end = totalPages - 1;
        }else{
            start = page - 2;
            end = page + 2;
            //头溢出
            if(start<2){
                start = 2;
                end = 6;
            }
            //尾溢出
            if(end>totalPages-1){
            start = totalPages - 4;
            end = totalPages-1;
            }
        }
        for(var i = start;i<=end;i++){


        if(i==page){ %>
        [${i}]
        <%
        }else{%>

        <span><a href="${ctxPath}/list/${i}">${i}</a></span>

       <% } }%>


        <%
        if(page<totalPages-3){%>
        <span>...</span>
        <%}%>

        <span ><a href="${ctxPath}/list/${totalPages}">${totalPages}</a> </span>

        <%
        if(page<totalPages){
        %>
        <span ><a href="${ctxPath}/list/${page+1}">下一页</a></span>
        <% }%>

    </td>
</table>

</body>
</html>

效果图

分页

js去写

JPA + beetl实现分页

小咸鱼

引用和评论

Nginx

Jerry和您聊聊Chrome开发者工具

💢线上高延迟请求排查

这些年

一文讲清楚static关键字

单元测试-PowerMock

Spring-@Configuration注解简析