经过Spring单元测试模拟请求，我们能够成功的取出数据，接下来，我们就开始写用来显示查询数据的分页页面吧。

我们使用Bootstrap来帮助我们快速开发漂亮的页面，具体怎么用可以查看Bootstrap中文官方文档 https://v3.bootcss.com/getting-started/

  1.把下载的Bootstrap压缩包解压到static文件夹。

  2.在views文件夹下创建list.jsp分页页面。

Bootstrap官方文档给出了一个简单引用的基本模板，我们可以看一下。

不难看出我们需要引入三个插件，而Bootstrap依赖jQuery插件，所以我们需要自己去下载jQuery插件，这里我直接在官网下载的最新的http://jquery.com/download/。

然后在<head>标签内引用插件。

list.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@page import="java.util.*" %>

<html>

<head>

    <!-- 不以/开头的相对路径，寻找资源，以当前资源的路径为标准，经常容易出问题-->

    <!-- 以/开始的相对路径，寻找资源，以服务器的路径为基准(http://localhost:3306)，需要加上项目名才能找到 -->

    <meta http-equiv="content-Type" content="text/html; charset=UTF-8"><!-- 设定页面使用的字符集。  -->

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

    <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/jquery-3.3.1.js"> </script>

    <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <title>SSM简单的增删改查</title>

</head>

<body>

<div class="container">

    <!--标题 -->

    <div class="row">

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

            <h2>SSM_CRUD</h2>

        </div>

    </div>

    <!-- 按钮-->

    <div class="row">

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

            <button class="btn-primary btn-sm">新增</button>

            <button class="btn-danger btn-sm">删除</button>

        </div>

    </div>

    <!--显示表格数据 -->

    <div class="row">

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

            <table class=" table table-hover">

                <tr>

                    <th>#</th>

                    <th>empId</th>

                    <th>gender</th>

                    <th>email</th>

                    <th>操作</th>

                </tr>

                <tr>

                    <th>1</th>

                    <th>1012</th>

                    <th>男</th>

                    <th>2121.com</th>

                    <th>

                        <button class="btn-primary btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</button>

                        <button class="btn-danger btn-sm    "><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除</button>

                    </th>

                </tr>

            </table>

        </div>

    </div>

    <!-- 显示分页信息-->

    <div class="row">

        <!-- 分页信息-->

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

        <!-- 分页条-->

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

            <nav aria-label="Page navigation">

                <ul class="pagination">

                    <li><a href="#">首页</a></li>

                    <li>

                        <a href="#" aria-label="Previous">

                            <span aria-hidden="true">&laquo;</span>

                        </a>

                    </li>

                    <li><a href="#">1</a></li>

                    <li><a href="#">2</a></li>

                    <li><a href="#">3</a></li>

                    <li><a href="#">4</a></li>

                    <li><a href="#">5</a></li>

                    <li>

                        <a href="#" aria-label="Next">

                            <span aria-hidden="true">&raquo;</span>

                        </a>

                    </li>

                    <li><a href="#">末页</a></li>

                </ul>

            </nav>

        </div>

    </div>

</div>

</body>

  3.结果

SSM_CRUD新手练习（8）搭建BootStrap分页页面的更多相关文章

  1. SSM_CRUD新手练习（6）分页后台控制器编写

    经过测试基础环境已经搭建好了,现在我们开始编写CRUD. 我们来看一下查询的逻辑该怎么写: 1.访问index.jsp页面 2.index.jsp页面发送查询员工的请求 3.EmployeeContr ...

  2. bootstrap 分页

    1.背景: 前端页面使用bootstrap分页,同时与搜索条件联动: 2. jsp页面由服务端返回后, 异步请求动态创建表格, 分页的数据由服务端第一次返回后初始化, 以后每次异步请求再更新. jsp ...

  3. Bootstrap 分页插件 ajax获取数据显示

    Bootstrap 分页插件 ajax获取数据显示 标签(空格分隔): bootstrap 文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据.渲染. 1. 版本 ...

  4. 面向新手的Webserver搭建（一）——IIS的搭建

    非常多童鞋说自己是做移动开发的,想挂个简单的Web API,但是server又不会搭,这样一来測试就成了问题.看看网上的教程.发现略难懂,并且大多是一个转一个,没价值,所以干脆写几篇文章讲讲简单的We ...

  5. bootstrap分页插件的使用

    项目中需要实现文章列表的分页显示,由于使用了bootstrap框架,所以我们选择bootstrap的分页实现方法.网上有一些这方面的介绍文章,并且也有相关的示例程序.这里结合我们的项目,介绍一下使用b ...

  6. yii使用bootstrap分页样式

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...

  7. bootstrap分页

    使用bootstrap分页插件,如下代码是html代码 <title>分页</title> <link href="page/bootstrap-3.3.5-d ...

  8. bootstrap 分页样式代码

    bootstrap 分页样式代码,废话不多说,直接上源码 <!DOCTYPE html> <html> <head> <title>Bootstrap ...

  9. bootstrap 基本页面元素，代码，列表

    bootstrap 基本页面元素,代码,列表 <!DOCTYPE html> <html> <head> <title></title> & ...

随机推荐

  1. spring 之 BeanDefinition & BeanDefinitionParser

    xml bean factory 的解析过程的 堆栈大概是这样的: at org.springframework.beans.factory.xml.NamespaceHandlerSupport.f ...

  2. JavaScript学习-4——DOM对象、事件

    本章目录 --------window对象 --------document对象 --------事件 一.window对象 函数调用: 自己封装的函数只写:函数名(): 数学函数Math 例:绝对值 ...

  3. 一个ipv4到ipv6的移植问题

    之前在使用ipv4的时候,有一个模块是使用raw socket来发包,它使用的一个option是:IP_HDRINCL. 如果设置了IP_HDRINCL选项,则raw会绕过source validat ...

  4. spring-AOP之通知和顾问

    通知和顾问都是切面的实现形式,其中通知可以完成对目标对象方法简单的织入功能. 而顾问包装了通知,可以让我们对通知实现更加精细化的管理,让我们可以指定具体的切入点. 通知分为前置通知,环绕通知及后置通知 ...

  5. 23.Hibernate-基础.md

    目录 1. ORM和Hibernare 2. 基本开发 2.1 lib 2.2 写对象和引入对象映射 2.2.1 写对象类文件 2.3 配置文件 2.3.1 配置加载映射文件 2.3.2 配置数据库连 ...

  6. keil mdk5安装

  7. python学习笔记（四）- 常用的字符串的方法

    一.常用的字符串方法(一):(字符串是不能被修改的) 1)a.strip()   #默认去掉字符串两边的空格和换行符 a = ' 字符串 \n\n ' c = a.strip() a.lstrip() ...

  8. C++ 设置光标问题

    一.隐藏光标 1.引入头文件window.h 2.  定义光标信息结构体变量 CONSOLE_CURSOR_INFO  cursor info={1,0}; typedef struct _CONSO ...

  9. python获取文件夹的大小(即取出所有文件计算大小)

    import os path = r'/Users/authurchen/PycharmProjects/Demo' # print(os.listdir(path)) ls = os.listdir ...

  10. python的int方法实现数据类型转换

    int方法默认以十进制来实现数据类型的转换: 举例: str1=" #给定的内容最好是纯数字,当然也可以是数字再掺杂点别的,最好别掺杂,因为会报错 print(type(str1),str) ...