注意：

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

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. Azure Cosmos DB 使用费用参考

    之前在学习Cosmos DB 中SQL API(DocumentDB) 的时候,也就是之前做的一些笔记,看到有使用费用的一些介绍,就有兴趣的去了解了下,做了一下简单的总结. 想了解更多或是购买使用的还 ...

  2. Linux tar命令详解

    当你想要压缩一大堆文件时,你得先将这一大堆文件先打成一个包(tar命令),然后再用压缩程序进行压缩(gzip bzip2命令) tar常见命令参数 必要参数有如下: -A 新增压缩文件到已存在的压缩 ...

  3. CVE-2013-2551漏洞成因与利用分析（ISCC2014 PWN6）

    CVE-2013-2551漏洞成因与利用分析 1. 简介 VUPEN在Pwn2Own2013上利用此漏洞攻破了Win8+IE10,5月22日VUPEN在其博客上公布了漏洞的细节.它是一个ORG数组整数 ...

  4. 铁乐学python26_hashlib+configparser+logging模块

    大部份内容摘自博客http://www.cnblogs.com/Eva-J/ hashlib模块算法介绍 Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 什么是摘要算法呢? ...

  5. Logstash和Flume-NG Syslog接收小测试

    目前在大规模日志处理平台中常见的日志采集器可以采用Logstash或Flume.这两种日志采集器架构设计理念基本相似,都采用采集-过滤处理-输出的方式.下面对这两种采集器Syslog接收性能做个简单测 ...

  6. October 09th 2017 Week 41st Monday

    My motto is: Contended with little, yet wishing for more. 我的座右铭是:为一点点感到满足,但希望获得更多. If you can live y ...

  7. npm install --save 和 --save-dev的区别

    --save 会把依赖包名称添加到 package.json 文件 "dependencies" 键下--save-dev 则添加到 package.json 文件 "d ...

  8. I - Matches Game（异或运算符的使用）

    I - Matches Game Description Here is a simple game. In this game, there are several piles of matches ...

  9. ABAP很厉害是怎么一种体验？

    知乎上偶然看到这个问题,觉得很有意思,我也来回答一发. 我本科和研究生学的是计算机专业,做项目用C/C++,研究生三年项目的代码量大概在三到四万行左右.2007年大学毕业加入SAP成都研究院一直工作到 ...

  10. 第五周：MySQL数据库

    首先,先了解一下数据库的基本概念要点: 数据库是数据存储的集合,表示数据结构化的信息 列存储表中的信息 行存储表的明细 主键是表中的唯一标识 主键不具备业务意义 在实际操作中,对表的主键不做强制性要求 ...