zoukankan      html  css  js  c++  java
  • 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 ; 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>
    
  • 相关阅读:
    小tips:JS之for in、Object.keys()和Object.getOwnPropertyNames()的区别
    Promise原理讲解 && 实现一个Promise对象 (遵循Promise/A+规范)
    【笔记】原生JS实现的DOM操作
    HTML5利用canvas,把多张图合并成一张图片
    大数据之Zookeeper:zookeeper数据结构、zookeeper安装、zookeeper内部原理、分布式zookeeper部署、命令行、zookeeper的API、监听服务器动态上下线案例
    大数据Zookeeper系列之Zookeeper分布式协调服务部署
    HBase安装和基础编程
    【Hadoop入门学习系列之六】HBase基本架构、编程模型和应用案例
    【Hadoop入门学习系列之五】MapReduce 2.0编程实战
    【Hadoop入门学习系列之四】MapReduce 2.0应用场景和原理、基本架构和编程模型
  • 原文地址:https://www.cnblogs.com/liqbk/p/13161127.html
Copyright © 2011-2022 走看看