注意：

嵌入到项目中时必须以带参形式访问：

http://localhost:8081/DETECT-X/showConnLogsByPager.action?pageSize=5&pager.offset=0&pageNo=1

导入 Maven 依赖：

        <!-- https://mvnrepository.com/artifact/jsptags/pager-taglib -->

        <dependency>

            <groupId>jsptags</groupId>

            <artifactId>pager-taglib</artifactId>

            <version>2.0</version>

        </dependency>

Controller:

ConnLogs 为 bean
 pi.setTotal(117);  // 这里的Total值是指的所有记录，也就是数据条数总数，这个要从数据库中拿，这里是用的静态数据测试
@RequestMapping("showConnLogsByPager")

    public ModelAndView showConnLogsByPager(PageInfo<ConnLogs> pi) {

        ModelAndView modelAndView = new ModelAndView("/jsp/ConnLogs/ConnLogsViewer.jsp");

        RepoDao repoDao = new RepoDaoImp();

        int userId = (int) request.getSession().getAttribute("userId");

        int pagerOOfset = Integer.parseInt(request.getParameter("pager.offset"));

        Object connLogsCount = repoDao.getConnLogsCountByUid(userId);

        pi.setTotal((Long) connLogsCount);

//        pageSize 决定每页显示多少条，setPageSize 必须和 showPage 的 count 变量值一样，否则每页就会有重复

        int pageSize = 8;

        pi.setPageSize(pageSize);

//        传入偏移量和pageSize 从数据库中得到分页后的数据 这种是数据库分页 最优的一种分页方式

        List<ConnLogs> connLogs = repoDao.showPage(userId, pagerOOfset, pageSize);

        modelAndView.addObject("connLogs", connLogs);

//        记录总数

        modelAndView.addObject("connLogsCount",connLogsCount);

        modelAndView.addObject("pi", pi);

        return modelAndView;

    }

sql语句：

SELECT * FROM conn_logs WHERE uid=? ORDER BY gid DESC LIMIT ?,?

jsp：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<%@ taglib prefix="pg" uri="http://jsptags.com/tags/navigation/pager" %>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()

            + path + "/";

%>

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <base href="<%= basePath %>"/>

    <title>default page</title>

    <meta id="pageSizeByMeta" content="${pi.pageSize }">

    <%--<link rel="stylesheet" href="/DETECT-X/disableBodySelect.css">--%>

    <link rel="stylesheet" href="/DETECT-X/bootstrap_3.3.6/bootstrap.min.css">

    <script src="/DETECT-X/jquery.min.js"></script>

    <script src="/DETECT-X/bootstrap_3.3.6/bootstrap.min.js"></script>

</head>

<body>

<br>

<br>

<br>

<br>

<table class="table table-striped">

    <thead>

    <tr>

        <td>gid</td>

        <td>warnningPtLink</td>

    </tr>

    </thead>

    <tbody>

    <c:forEach var="C" items="${connLogs}">

        <tr>

            <td>${C.gid}</td>

            <td>${C.warningPtLink}</td>

        </tr>

    </c:forEach>

    </tbody>

</table>

<nav>

    <ul class="pagination">

        <pg:pager url="showConnLogsByPager.action" items="${pi.total }" maxPageItems="${pi.pageSize }"

                  export="currentPageNumber=pageNumber">

            <pg:param name="pageSize" value="${pi.pageSize }"/>

            <pg:first>

                <li><a href="${pageUrl}&pageNo=${pageNumber }"><span class="glyphicon glyphicon-home"></span></a></li>

            </pg:first>

            <pg:prev>

                <li>

                    <a href="${pageUrl }&pageNo=${pageNumber }" aria-label="Previous">

                        <span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>

                    </a>

                </li>

            </pg:prev>

            <pg:pages>

                <c:choose>

                    <c:when test="${pageNumber eq currentPageNumber }">

                        <li><a><font color="red">${pageNumber }</font></a></li>

                    </c:when>

                    <c:otherwise>

                        <li>

                            <a href="${pageUrl }&pageNo=${pageNumber }">${pageNumber }</a>

                        </li>

                    </c:otherwise>

                </c:choose>

            </pg:pages>

            <pg:next>

                <li>

                    <a href="${pageUrl }&pageNo=${pageNumber }" aria-label="Next">

                        <span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>

                    </a>

                </li>

            </pg:next>

            <pg:last>

                <li><a href="${pageUrl }&pageNo=${pageNumber }"><font

                        class="glyphicon glyphicon-modal-window"></font></a></li>

            </pg:last>

        </pg:pager>

        <script>

            $(function () {

                $("#gotoPageByMetro").click(function () {

                    var pageNum = $("#beGotoPageNum").val();

                    var pageSizeOfJs = $("#pageSizeByMeta").attr("content");

                    console.log(pageSizeOfJs + " " + pageNum);

                    // pageNum （页码） 需要 -1 后 再乘以 pagesize ，才能得到正确的 pager.offset 值

                    var pagerOffset = pageSizeOfJs * (pageNum - 1);

                    window.location.href = "showConnLogsByPager.action?pageSize=${pi.pageSize }&pager.offset=" + pagerOffset + "&pageNo=" + pageNum;

                });

                //    给检索框绑定回车事件

                $('#beGotoPageNum').bind('keypress', function (event) {

                    if (event.keyCode == "13") {

                        var pageNum = $("#beGotoPageNum").val();

                        var pageSizeOfJs = $("#pageSizeByMeta").attr("content");

                        console.log(pageSizeOfJs + " " + pageNum);

                        // pageNum （页码） 需要 -1 后 再乘以 pagesize ，才能得到正确的 pager.offset 值

                        var pagerOffset = pageSizeOfJs * (pageNum - 1);

                        window.location.href = "showConnLogsByPager.action?pageSize=${pi.pageSize }&pager.offset=" + pagerOffset + "&pageNo=" + pageNum;

                    }

                });

            });

        </script>

        <div class="col-lg-2">

            <div class="input-group">

                <input id="beGotoPageNum" type="text" class="form-control">

                <span class="input-group-btn">

                        <button id="gotoPageByMetro" class="btn btn-default" type="button">

                            <span class="glyphicon glyphicon-modal-window"></span>

                        </button>

                    </span>

            </div><!-- /input-group -->

        </div><!-- /.col-lg-6 -->

    </ul>

</nav>

</body>

</html>

测试效果：

springmvc pager-taglib 分页，bootstrap样式的更多相关文章

  1. jqgrid+bootstrap样式实践

    jqgrid+bootstrap样式实践,报错数据加载,选中,删除等功能 需要引入的样式 bootstrap.min.css ui.jqgrid.css 需要引入的JS jquery.min.js b ...

  2. asp.net mvc 简易通用自定义Pager实现分页

    asp.net mvc 自定义Pager实现分页 Intro 一个WEB应用程序中经常会用到数据分页,本文将实现一个简单通用的分页组件,包含一个 PagerModel (用来保存页码信息),一个 Ht ...

  3. 从覆盖bootstrap样式谈css选择器优先级

    样式优先级 首先简单说几个定义样式的方式: 元素内嵌: <li><a href="" style="color:#ffffff;">SH ...

  4. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

  5. springMVC源码分析--动态样式ThemeResolver（二）

    在上一篇博客springMVC源码分析--动态样式ThemeResolver(一)中我们介绍了多样式ThemeResolver的使用方法,接下来我们对源码进行简单的分析一下. ThemeResolve ...

  6. datatables 配套bootstrap样式使用小结（2） ajax篇

    距离上一篇有点时间了,周末做了伴郎参加了一个土豪同学的婚礼. 上一篇是介绍一下基本的用法,基本的原理是取出所有的数据,然后调用$.datatables(option)方法格式化,这种方法显然不太科学, ...

  7. Yii2框架bootstrap样式理解

    Yii2框架默认採用了bootstrap作为CSS风格,各种视图类组件都如此.之前一直採用默认风格,并在必要的时候加入或者改动一下class来达到目的.但在改版Yii1.1的orange项目时.发现之 ...

  8. js 重写 bootstrap 样式 alert/confirm 消息窗口

    相信很多人都受够了 alert.confirm 的样子,最近正在用 bootstrap 做项目,顺便封装了一个 bootstrap 样式的消息框. 实现起来很简单,bootstrap 本身就自带了 m ...

  9. Angular中使用bootstrap样式

    Angular中使用bootstrap样式 Angular中引入bootstrap的方法   方法1:在Angular.json中的styles数组中添加bootstrap路径 如下所示: " ...

  10. 利用vue v-bind属性绑定bootstrap样式以及输出数据

    自从知道了bootstrap,就被他简介,大气美观的样式吸引,即使在vue框架中,仍旧想使用,下面给出了vue适配版和原版的代码,以飨读者 数据输出部分 export default { data() ...

随机推荐

  1. [翻译] STAlertView

    STAlertView The idea of this component is to improve the readability while using the native UIAlertV ...

  2. Imagex用法

    imagex用来合并/导出wim映像实例 查看wim中包含的所有单个wim实例信息,注意其中的index是唯一的,用来区分不同的wim,导出的时候也通过该index导出相应的wimimagex /in ...

  3. python3 django1.10 使用mysql服务器

    python3中使用mysql报错ModuleNotFoundError: No module named 'MySQLdb' 原因是:在python2.x中用mysqldb,但是在python3.x ...

  4. php请求页面将返回的页面发送email

    <?php require_once 'CLI_config.php'; require_once dirname(__FILE__).'/../../../../common/framewor ...

  5. sql： having使用，及删除重复数据

    写了好几年的sql,having语句基本上很少写,这就有一点尴尬了,现在总结一下having的作用,每日整理一下学习文档. having 通常伴随group by使用,过滤group by的数据集. ...

  6. 【模板】deque实现单调队列

    双端队列deque容器: 关于deque最常用的有这几个函数: 都是成员函数 双端队列模板题:[洛谷]P2952 [USACO09OPEN]牛线Cow Line #include<iostrea ...

  7. redis 使用案例

    1.使用redis消息列队发布信息 在一些用户创造用户的应用中(如SNS,微博),可能出现1秒有上千万个用户同时发布消息的情况,此时如果使用mysql可能出现‘too many connections ...

  8. bn两个参数的计算以及layer norm、instance norm、group norm

    bn一般就在conv之后并且后面再接relu 1.如果输入feature map channel是6,bn的gamma beta个数是多少个? 6个. 2.bn的缺点: BN会受到batchsize大 ...

  9. PAT乙级1001

    https://pintia.cn/problem-sets/994805260223102976/problems/994805325918486528 #include<bits/stdc+ ...

  10. 内部元素一一相应的集合的算法优化，从list到hashmap

    说是算法优化,基本上是在吹牛,仅仅只是算是记录下,我写代码时候的思路.毕竟还是小菜鸟. 我要开一个party,与会者都是情侣,可是情侣并非一起过来的,而是有先有后,可是每位与会者来的时候都拿着一束鲜花 ...