(5)bootstrap分页查询+pageHelper插件

导读:
使用分页技术,发送请求给控制器,拿到数据库数据,再传送给jsp页面显示。
(1)先给出我做的效果显示图
(5)bootstrap分页查询+pageHelper插件_第1张图片
这里的页面设计用的是前端框架bootstrap,分页技术用的pageHelper。
(2)用boostrap的栅格系统,设计如下布局

<div class="container">
        
        <div class="row">
            <div class="col-md-12">

            div>
        div>
        
        <div class="row">
            <div class="col-md-4 col-md-offset-8">

            div>
        div>
        
        <div class="row">
        div>
        
        <div class="row">
                
                <div class="col-md-6">
                div>
                
                <div class="col-md-6">
                div>

如图:
(5)bootstrap分页查询+pageHelper插件_第2张图片
注:表格的话,使用bootstrap很容易获得,在这里就不在赘述了,后面会贴出整个代码。
(3)分页技术的实现
首先,给出pageHelper的使用说明链接

https://github.com/pagehelper/Mybatis-PageHelper/blob/master/wikis/zh/HowToUse.md

我总结了一下使用方法:
1.在 pom.xml 中添加pageHelper依赖:


        <dependency>
            <groupId>com.github.pagehelpergroupId>
            <artifactId>pagehelperartifactId>
            <version>5.0.0version>
        dependency>

2.配置拦截器插件(我在这里使用的是方式1:在 MyBatis 配置 xml 中配置拦截器插件)


    <plugin interceptor="com.github.pagehelper.PageInterceptor">
    
    plugin>

然后,在LoginController包下接收请求并处理

/**
    * 使用pageHelper插件实现分页查询
     * @param pn:pageNum的缩写,表示页数,默认值为1,即首页。
     * @param model:是MVC里的Model,作用是将用户信息及分页信息存在此model里,以便发送给页面
     * @return :返回到视图解析器下的jsp页面
     */
    @RequestMapping(value="/userList")
    public String getAllUser(@RequestParam(value="pn",defaultValue="1") Integer pn,Model model) {
        //startPage是PageHelper的静态方法,参数1:默认开始页面,参数2:每页显示数据的条数
        PageHelper.startPage(pn, 5);
        //从当前类下注入的业务层实现类userService中调用方法,该方法所在类利用注入的userDao来调用真正的查询方法查询数据库信息。
        List allUser = userService.getAllUser();
        System.out.println(allUser);
        //使用PageInfo包装查询页面,封装了详细的分页信息.第二个参数表示连续显示的页数
        PageInfo page = new PageInfo(allUser,5);
        //利用userService属性,将分页的信息以及查询出来的信息封装到model里,传送给页面
        model.addAttribute("pageInfo", page);
        return "user_list";
    }

我以为,在这个地方有必要插播一个小广告,PageInfo 类有很多与分页有关又好用的属性以及方法,请往下看PageInfo 类的API:

     //当前页
    private int pageNum;
    //每页的数量
    private int pageSize;
    //当前页的数量
    private int size;
     //总记录数
    private long total;
    //总页数
    private int pages;
    //结果集
    private List list;
    //前一页
    private int prePage;
    //下一页
    private int nextPage;
     //是否为第一页
    private boolean isFirstPage = false;
    //是否为最后一页
    private boolean isLastPage = false;
    //是否有前一页
    private boolean hasPreviousPage = false;
    //是否有下一页
    private boolean hasNextPage = false;
    //导航页码数
    private int navigatePages;
     //所有导航页号
    private int[] navigatepageNums;
    //上面属性的get和set方法。
    public long getTotal()
    ...

最后,说明都写在注释里了


        <div class="row">
                
                <div class="col-md-6">
                    当前${pageInfo.pageNum}页,共${pageInfo.pages }页,总${pageInfo.total }条记录
                div>
                
                <div class="col-md-6">
                    <nav aria-label="Page navigation">
                      <ul class="pagination">
                      
                       <li>
                            <a href="${pageContext.request.contextPath}/userList.html?pn=1">首页a>
                       li>
                       
                       <c:if test="${pageInfo.hasPreviousPage}">
                         <li>
                          <a href="${pageContext.request.contextPath}/userList.html?pn=${pageInfo.pageNum-1}" aria-label="Previous">
                            <span aria-hidden="true">«span>
                          a>
                        li>
                       c:if>
                        <li>
                        
                          <c:forEach items="${pageInfo.navigatepageNums }" var="page_Nums">
                            <c:if test="${page_Nums==pageInfo.pageNum }">
                             <li class="active"><a href="#">${page_Nums}a>li>
                            c:if>
                            <c:if test="${page_Nums!=pageInfo.pageNum }">
                             <li ><a href="${pageContext.request.contextPath}/userList.html?pn=${page_Nums}">${page_Nums}a>li>
                            c:if>
                          c:forEach>
                        li>
                         
                        <c:if test="${pageInfo.hasNextPage}">
                            <li>
                              <a href="${pageContext.request.contextPath}/userList.html?pn=${pageInfo.pageNum+1}" aria-label="Next">
                                <span aria-hidden="true">»span>
                              a>
                            li>
                        c:if>
                         <li><a href="${pageContext.request.contextPath}/userList.html?pn=${pageInfo.pages}">末页a>li>
                      ul>
                    nav>
                div>
        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" %>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户管理页面title>

<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">script>

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">script>
head>
<body>
    <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 ">新增button>
                <button type="button" class="btn btn-danger ">删除button>
            div>
        div>
        
        <div class="row">
            <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>用户idth>
                      <th>用户名th>
                      <th>密码th>
                      <th>操作th>
                    tr>
                  thead>
                  <tbody>
                        
                      <c:forEach items="${pageInfo.list}" var="user">
                      <tr>
                            <td>${user.id}td>
                            <td>${user.username}td>
                            <td>${user.password}td>
                         <td>
                            <button class="btn btn-primary btn-xs">
                                  编辑<span class="glyphicon glyphicon-pencil" aria-hidden="true">span>
                            button>
                            <button class="btn btn-primary btn-xs" aria-label="Left Align">
                                删除<span class="glyphicon glyphicon-trash" aria-hidden="true">span>
                            button>
                         td>
                    tr>
                     c:forEach>
                  tbody>
            table>
        div>
        
        <div class="row">
                
                <div class="col-md-6">
                    当前${pageInfo.pageNum}页,共${pageInfo.pages }页,总${pageInfo.total }条记录
                div>
                
                <div class="col-md-6">
                    <nav aria-label="Page navigation">
                      <ul class="pagination">
                      
                       <li>
                            <a href="${pageContext.request.contextPath}/userList.html?pn=1">首页a>
                       li>
                       
                       <c:if test="${pageInfo.hasPreviousPage}">
                         <li>
                          <a href="${pageContext.request.contextPath}/userList.html?pn=${pageInfo.pageNum-1}" aria-label="Previous">
                            <span aria-hidden="true">«span>
                          a>
                        li>
                       c:if>
                        <li>
                        
                          <c:forEach items="${pageInfo.navigatepageNums }" var="page_Nums">
                            <c:if test="${page_Nums==pageInfo.pageNum }">
                             <li class="active"><a href="#">${page_Nums}a>li>
                            c:if>
                            <c:if test="${page_Nums!=pageInfo.pageNum }">
                             <li ><a href="${pageContext.request.contextPath}/userList.html?pn=${page_Nums}">${page_Nums}a>li>
                            c:if>
                          c:forEach>
                        li>
                         
                        <c:if test="${pageInfo.hasNextPage}">
                            <li>
                              <a href="${pageContext.request.contextPath}/userList.html?pn=${pageInfo.pageNum+1}" aria-label="Next">
                                <span aria-hidden="true">»span>
                              a>
                            li>
                        c:if>
                         <li><a href="${pageContext.request.contextPath}/userList.html?pn=${pageInfo.pages}">末页a>li>
                      ul>
                    nav>
                div>
        div>
    div>
body>
html>

你可能感兴趣的:(前端基础)