分页查询的具体实现

最新推荐文章于 2024-03-14 17:00:26 发布

北冥友余

最新推荐文章于 2024-03-14 17:00:26 发布

阅读量3.3k

点赞数 2

分类专栏： web基础前端基础

本文链接：https://blog.csdn.net/Edison_03/article/details/76026486

版权

web基础同时被 2 个专栏收录

63 篇文章 0 订阅

订阅专栏

前端基础

21 篇文章 0 订阅

订阅专栏

导读：
本案例主要是熟悉ajax+json这种前后端交互的模式，网页端使用ajax发送请求，服务器则返回json数据，这样做的好处，就是降低开发耦合性，真正实现跨平台开发（浏览器，ios，安卓等）
（1）首先就来效果展示
数据图查询的数据，页面展示
这里写图片描述
点击页面上的新增，删除等按钮会弹出模态框

（2）实现流程
首先，保证controller里返回的是json数据

@RequestMapping(value="/userList",method=RequestMethod.GET)
    @ResponseBody
    public Map<String, Object> getAllUser(@RequestParam(value="pn",defaultValue="1") Integer pn) {
        //startPage是PageHelper的静态方法，参数1：默认开始页面，参数2：每页显示数据的条数
        PageHelper.startPage(pn, 5);
        //从当前类下注入的业务层实现类userService中调用方法，该方法所在类利用注入的userDao来调用真正的查询方法查询数据库信息。
        List<User> allUser = userService.getAllUser();
        System.out.println(allUser);
        //使用PageInfo包装查询页面，封装了详细的分页信息.第二个参数表示连续显示的页数
        PageInfo page = new PageInfo(allUser,5);
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("pageInfo", page);
        return map;
    }

然后，剩下的就是解析json数据，在页面显示了，这一步主要用到的几个知识点jQuery，bootstrap框架，pageHelper技术。
1.先看一下区域布局图
这里写图片描述
再看一下，服务器返回的给浏览器的jason数据

2.让页面加载的时候就访问页面首页

$(function(){
        toSomePage(1);
    });
    /**
        每次调用此函数都发送一次请求，变量为访问的页码pn
    */
    function toSomePage(pn){
         $.ajax({
                url:"${pageContext.request.contextPath}/userList.do",
                data:"pn="+pn,
                type:"GET",
                success:function(result){
                    build_user_table(result);//构建用户表格
                    build_pagination_info(result);//构建分页信息
                    build_pagination_nav(result)//构建分页导航
                }
            });
    }

解析服务器返回的json数据之list用户列表：

点我，查看bootstrap官方文档对表格的介绍

/**
        创建一张用户表显示读取的数据
    */
    function build_user_table(result){
        //先清空表格，不然会直接回追加到上次查询结果上
        $("#user_table tbody").empty();
        var users = result.pageInfo.list;//获取服务器返回的json数据
        $.each(users,function(index,element){//$.each()是jquery的遍历方法
            //$("<td></td>")使用jquery创建元素，然后剩下的就是一些拼接工作了
            var userId =$("<td></td>").append(element.id);
            var username = $("<td></td>").append(element.username);
            var password = $("<td></td>").append(element.password);
            var edit = $("<button></button>").addClass("btn btn-primary btn-xs").append("编辑").append($("<span></span>").addClass("glyphicon glyphicon-pencil"));
            var del = $("<button></button>").addClass("btn btn-primary btn-xs").append("删除").append($("<span></span>").addClass("glyphicon glyphicon-trash"));
            var btn = $("<td></td>").append(edit).append(del);
            $("<tr></tr>").append(userId).append(username).append(password).append(btn).appendTo("#user_table tbody");
        })
    }

解析服务器返回的json数据之分页信息：

/**
        创建分页信息
    */
    function build_pagination_info(result){
        $("#page_info_area").empty();
        //得到服务器返回的jason数据里的分页信息，然后拼接
        var pageNum =result.pageInfo.pageNum;
        var pages = result.pageInfo.pages;
        var total = result.pageInfo.total;
        $("#page_info_area").append("当前"+pageNum+"页,共"+pages+"页,总"+total+"条记录");
    }

解析服务器返回的json数据之分页导航条：

点我，查看bootstrap官方文档对分页的介绍

    /**
        创建分页导航条：
        根据bootstrap文档里的分页说明，使用jquery创建元素。
    */
    function build_pagination_nav(result){
        $("#page_nav_area").empty();
            //首页
        var fristPageLi = $("<li></li>").append($("<a></a>").attr("href","#").append("首页"));
            //前一页
        var prePageLi = $("<li></li>").append($("<a></a>").attr("href","#").append($("<span></span>").append("&laquo;")));
                //如果没有前一页，就让按钮不能被点击,否则绑定点击事件，重新发送ajax请求，访问相应页面
                if(result.pageInfo.hasPreviousPage == false){
                    fristPageLi.addClass("disable");
                    prePageLi.addClass("disable");
                }
                else{
                    fristPageLi.click(function(){
                        toSomePage(1);
                    });
                    prePageLi.click(function(){
                        toSomePage(result.pageInfo.pageNum -1);
                    });
                }
        var ul = $("<ul></ul>").addClass("pagination").append(fristPageLi).append(prePageLi);
        $.each(result.pageInfo.navigatepageNums,function(index,element){
            var numLi = $("<li></li>").append($("<a></a>").attr("href","#").append(element));
                //如果遍历的页码等于当前页面，就高亮显示，然后添加点击事件，如果有点击，就重新发送ajax请求，访问当前页面（pn=element）
                if(result.pageInfo.pageNum==element){
                    numLi.addClass("active");
                }
                numLi.click(function(){
                    toSomePage(element);
                })
            ul.append(numLi);
        })
            //下一页
        var nextPageLi = $("<li></li>").append($("<a></a>").attr("href","#").append($("<span></span>").append("&raquo;")));
            //末页
        var lastPageLi = $("<li></li>").append($("<a></a>").attr("href","#").append("末页"));
                //如果没有后一页，就让按钮不能被点击,否则绑定点击事件，重新发送ajax请求，访问相应页面
                if(result.pageInfo.hasNextPage == false){
                    nextPageLi.addClass("disable");
                    lastPageLi.addClass("disable");
                }
                else{
                    nextPageLi.click(function(){
                        toSomePage(result.pageInfo.pageNum +1);
                    });
                    lastPageLi.click(function(){
                        toSomePage(result.pageInfo.pages);
                    });
                }
        ul.append(nextPageLi).append(lastPageLi);
        $("<nav></nav>").append(ul).appendTo("#page_nav_area");
    }

3.这里给出我页面布局代码：

<div class="container">
        <!-- 标题行 -->
        <div class="row">
            <div class="col-md-12">
                <h1>用户管理页面</h1>
            </div>
        </div>
        <!-- 按钮行 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button type="button" class="btn btn-primary " data-toggle="modal" data-target="#add_user_model">新增</button>
                <button type="button" class="btn btn-danger " data-toggle="modal" data-target="#add_user_model">删除</button>
            </div>
        </div>
        <!-- 表格数据行 -->
        <div class="row">
            <table class="table table-hover" id="user_table">
                  <thead>
                    <tr>
                      <th>用户id</th>
                      <th>用户名</th>
                      <th>密码</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                        <!--
                             从Model里拿到存放用户信息的list，在遍历之前要引入核心标签库，uri="http://java.sun.com/jsp/jstl/core" prefix="c"
                             然后使用EL表达式获取user的各个属性值，之后的两个按钮使用bootstrap组件按钮和字体图标，看看官方文档没什么好讲的
                          -->
                  </tbody>
            </table>
        </div>
        <!-- 提示分页信息行 -->
        <div class="row">
                <!-- 分页文字信息 ：拿到控制器处理请求时封装在pageInfo里面的分页信息-->
                <div class="col-md-6" id="page_info_area">
                </div>
                <!-- 分页码 -->
                <div class="col-md-6" id="page_nav_area">
                       <!-- 
                            1.pageContext.request.contextPath表示当前项目路径，采用的是绝对路径表达方式。一般为http:localhost:8080/项目名 。
                            2.首页，末页的逻辑：pn=1访问第一次，pn=${pageInfo.pages}访问最后一页
                       -->
                       <!-- 如果还有前页就访问当前页码-1的页面， -->
                       <!--遍历所有导航页码，如果遍历的页码页当前页码相等就高亮显示，如果相等就普通显示  -->
                       <!-- 如果还有后页就访问当前页码+1的页面， -->
                </div>
        </div>
    </div>

（3）功能：点击增加按钮，当前页面中弹出模态框

点我，查看bootstrap官方文档对模态框的介绍

下面是我的代码（基本没怎么改过示例代码），在模态体body里我还加了个表格，
效果就像我在文章开头展示的那样
这里写图片描述

<!-- 模态框（Modal） -->
    <div class="modal fade" id="add_user_model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">新增用户</h4>
                </div>
                <div class="modal-body">
                        <form class="form-horizontal" role="form">
                          <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                              <input type="text" class="form-control" id="firstname" placeholder="用户名">
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="lastname" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                              <input type="text" class="form-control" id="lastname" placeholder="密码">
                            </div>
                          </div>
                        </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

（4）user_list.jsp全部代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户管理页面</title>
<!-- Bootstrap -->
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script type="text/javascript">
    $(function(){
        toSomePage(1);
    });
    /**
        每次调用此函数都发送一次请求，变量为访问的页码pn
    */
    function toSomePage(pn){
         $.ajax({
                url:"${pageContext.request.contextPath}/userList.do",
                data:"pn="+pn,
                type:"GET",
                success:function(result){
                    build_user_table(result);//构建用户表格
                    build_pagination_info(result);//构建分页信息
                    build_pagination_nav(result)//构建分页导航
                }
            });
    }
    /**
        创建一张用户表显示读取的数据
    */
    function build_user_table(result){
        //先清空表格，不然会直接回追加到上次查询结果上
        $("#user_table tbody").empty();
        var users = result.pageInfo.list;//获取服务器返回的json数据
        $.each(users,function(index,element){//$.each()是jquery的遍历方法
            //$("<td></td>")使用jquery创建元素，然后剩下的就是一些拼接工作了
            var userId =$("<td></td>").append(element.id);
            var username = $("<td></td>").append(element.username);
            var password = $("<td></td>").append(element.password);
            var edit = $("<button></button>").addClass("btn btn-primary btn-xs").append("编辑").append($("<span></span>").addClass("glyphicon glyphicon-pencil"));
            var del = $("<button></button>").addClass("btn btn-primary btn-xs").append("删除").append($("<span></span>").addClass("glyphicon glyphicon-trash"));
            var btn = $("<td></td>").append(edit).append(del);
            $("<tr></tr>").append(userId).append(username).append(password).append(btn).appendTo("#user_table tbody");
        })
    }
    /**
        创建分页信息
    */
    function build_pagination_info(result){
        $("#page_info_area").empty();
        //得到服务器返回的jason数据里的分页信息，然后拼接
        var pageNum =result.pageInfo.pageNum;
        var pages = result.pageInfo.pages;
        var total = result.pageInfo.total;
        $("#page_info_area").append("当前"+pageNum+"页,共"+pages+"页,总"+total+"条记录");
    }
    /**
        创建分页导航条：
        根据bootstrap文档里的分页说明，使用jquery创建元素。
    */
    function build_pagination_nav(result){
        $("#page_nav_area").empty();
            //首页
        var fristPageLi = $("<li></li>").append($("<a></a>").attr("href","#").append("首页"));
            //前一页
        var prePageLi = $("<li></li>").append($("<a></a>").attr("href","#").append($("<span></span>").append("&laquo;")));
                //如果没有前一页，就让按钮不能被点击,否则绑定点击事件，重新发送ajax请求，访问相应页面
                if(result.pageInfo.hasPreviousPage == false){
                    fristPageLi.addClass("disable");
                    prePageLi.addClass("disable");
                }
                else{
                    fristPageLi.click(function(){
                        toSomePage(1);
                    });
                    prePageLi.click(function(){
                        toSomePage(result.pageInfo.pageNum -1);
                    });
                }
        var ul = $("<ul></ul>").addClass("pagination").append(fristPageLi).append(prePageLi);
        $.each(result.pageInfo.navigatepageNums,function(index,element){
            var numLi = $("<li></li>").append($("<a></a>").attr("href","#").append(element));
                //如果遍历的页码等于当前页面，就高亮显示，然后添加点击事件，如果有点击，就重新发送ajax请求，访问当前页面（pn=element）
                if(result.pageInfo.pageNum==element){
                    numLi.addClass("active");
                }
                numLi.click(function(){
                    toSomePage(element);
                })
            ul.append(numLi);
        })
            //下一页
        var nextPageLi = $("<li></li>").append($("<a></a>").attr("href","#").append($("<span></span>").append("&raquo;")));
            //末页
        var lastPageLi = $("<li></li>").append($("<a></a>").attr("href","#").append("末页"));
                //如果没有后一页，就让按钮不能被点击,否则绑定点击事件，重新发送ajax请求，访问相应页面
                if(result.pageInfo.hasNextPage == false){
                    nextPageLi.addClass("disable");
                    lastPageLi.addClass("disable");
                }
                else{
                    nextPageLi.click(function(){
                        toSomePage(result.pageInfo.pageNum +1);
                    });
                    lastPageLi.click(function(){
                        toSomePage(result.pageInfo.pages);
                    });
                }
        ul.append(nextPageLi).append(lastPageLi);
        $("<nav></nav>").append(ul).appendTo("#page_nav_area");
    }
</script>
    <div class="container">
        <!-- 标题行 -->
        <div class="row">
            <div class="col-md-12">
                <h1>用户管理页面</h1>
            </div>
        </div>
        <!-- 按钮行 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button type="button" class="btn btn-primary " data-toggle="modal" data-target="#add_user_model">新增</button>
                <button type="button" class="btn btn-danger " data-toggle="modal" data-target="#add_user_model">删除</button>
            </div>
        </div>
        <!-- 表格数据行 -->
        <div class="row">
            <table class="table table-hover" id="user_table">
                  <thead>
                    <tr>
                      <th>用户id</th>
                      <th>用户名</th>
                      <th>密码</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                        <!--
                             从Model里拿到存放用户信息的list，在遍历之前要引入核心标签库，uri="http://java.sun.com/jsp/jstl/core" prefix="c"
                             然后使用EL表达式获取user的各个属性值，之后的两个按钮使用bootstrap组件按钮和字体图标，看看官方文档没什么好讲的
                          -->
                  </tbody>
            </table>
        </div>
        <!-- 提示分页信息行 -->
        <div class="row">
                <!-- 分页文字信息 ：拿到控制器处理请求时封装在pageInfo里面的分页信息-->
                <div class="col-md-6" id="page_info_area">
                </div>
                <!-- 分页码 -->
                <div class="col-md-6" id="page_nav_area">
                       <!-- 
                            1.pageContext.request.contextPath表示当前项目路径，采用的是绝对路径表达方式。一般为http:localhost:8080/项目名 。
                            2.首页，末页的逻辑：pn=1访问第一次，pn=${pageInfo.pages}访问最后一页
                       -->
                       <!-- 如果还有前页就访问当前页码-1的页面， -->
                       <!--遍历所有导航页码，如果遍历的页码页当前页码相等就高亮显示，如果相等就普通显示  -->
                       <!-- 如果还有后页就访问当前页码+1的页面， -->
                </div>
        </div>
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="add_user_model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">新增用户</h4>
                </div>
                <div class="modal-body">
                        <form class="form-horizontal" role="form">
                          <div class="form-group">
                            <label for="username" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                              <input type="text" class="form-control" id="username" placeholder="用户名">
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="password" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                              <input type="text" class="form-control" id="password" placeholder="密码">
                            </div>
                          </div>
                        </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</body>
</html>

北冥友余

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
分页查询的具体实现

导读：本案例主要是熟悉ajax+json这种前后端交互的模式，网页端使用ajax发送请求，服务器则返回json数据，这样做的好处，就是降低开发耦合性，真正实现跨平台开发（浏览器，ios，安卓等）（1）首先就来效果展示数据图查询的数据，页面展示点击页面上的新增，删除等按钮会弹出模态框（2）实现流程首先，保证controller里返回的是json数据@RequestMap
复制链接

扫一扫