JSP-SSM-实现分页查询

分页查询

分页查询需要注意以下:

​ 1 根据sql语句的limit 页码 每页的记录条数 进行查询

​ 页码=(当前页码-1)*每页记录条数

​ 2 需要查出总记录条数,确定最大页数.

步骤

dao层

Mapper接口

    // 分页查询 @parame
    List<Books> queryBookPage(@Param("m")int m, @Param("n")int n);

    // 查询页数
    int queryPage();

Mapper.xml文件

 <select id="queryBookPage" resultType="Books">
        select  * from ssmbuild.books order by bookID desc limit #{m},#{n};
    </select>

    <select id="queryPage" resultType="java.lang.Integer">
        select count(BookID) from books;
    </select>

service层

service接口

    // 分页查询
    List<Books> queryBookPage(int page);

    // 查询页数
    int queryPage();

serviceImpl实现类

//记录每页显示的行数
private int num = 10;
	//查询每页的记录
    @Override
    public List<Books> queryBookPage(int page) {
        int n = this.num;
        int m = n * (page - 1);
//        Map<String, Integer> map = new HashMap<>();
//        map.put("m", m);
//        map.put("n", n);
        return bookMapper.queryBookPage(m, n);
    }
//查询最大页数
    @Override
    public int queryPage() {
        int count = bookMapper.queryPage();
        int page;
        if (count%this.num==0) {
            page = count/this.num;
        } else {
            page = count/this.num + 1;
        }
        return page;
    }

Controller层

 //查询到所有的书籍并返回一个列表
    @RequestMapping("/allBook")
    public  String list(Model model, Integer page){
        //当传过来是空的时候,默认第一页
        if (page == null) {
            page = 1;
        } else if (page < 1){
            //不能小于第一页
            page = 1;
        } else if (page > bookService.queryPage()) {
            //不能大于最大页
            page = bookService.queryPage();
        }
        //绑定最大页数
        model.addAttribute("maxPage", bookService.queryPage());
        //调用service层查询第几页的数据
        List<Books> list= bookService.queryBookPage(page);
        //绑定查询的结果到列表
        model.addAttribute("list",list);
        //绑定当前的页码
        model.addAttribute("page", page);
        return "allBook";
    }

JSP

<div class="row" style="float: right ;width: 100%">
    <div class="col-md-6">
        <ul class="pagination">
            <li class="page-item"><a class="page-link" href="${pageContext.request.contextPath}/book/allBook?page=1}">首页</a></li>
            <li class="page-item"><a class="page-link" href="${pageContext.request.contextPath}/book/allBook?page=1">1</a></li>
            <li class="page-item active"><a class="page-link" href="${pageContext.request.contextPath}/book/allBook?page=2">2</a></li>
            <li class="page-item"><a class="page-link" href="${pageContext.request.contextPath}/book/allBook?page=3">3</a></li>
            <li class="page-item"><a class="page-link" href="${pageContext.request.contextPath}/book/allBook?page=${page+1}">下一页</a></li>
            <li class="page-item"><a class="page-link" href="${pageContext.request.contextPath}/book/allBook?page=${maxPage}">尾页</a></li>
        </ul>
    </div>
    <div class="col-md-2">
        当前页码:<input id="page" type="text" size="4" value="${page}" oninput = "value=value.replace(/[^\d]/g,'')">
    </div>
    <div class="col-md-4">
        <a class="btn btm-primary" onclick="submitForm()">跳转</a>
        <script>
            function submitForm() {
                var page = document.getElementById("page").value;
                
                var url = '${pageContext.request.contextPath}/book/allBook?page=' + page;
                <!-- 页面跳转 -->
                window.location = url;
            }
        </script>
    </div>

</div>