注意：

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

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. [翻译] FBLikeLayout

    FBLikeLayout This is an UICollectionView layout inspired by the photo section of facebook. This layo ...

  2. openweathermap-免费的天气预报接口

    openweathermap-免费的天气预报接口 其官方网址为:http://www.openweathermap.org/api 静态截图: 具备以下的一些特点: 1. Current weathe ...

  3. consul日常操作命令

    #开发模式运行agent consul agent -dev #查看consul 集群成员 consul members [-detailed] members命令的输出基于gossip协议,并最终一 ...

  4. Python入门-模块1（模块导入与time模块）

    ---恢复内容开始--- 模块 一.模块分类: 模块分为三种: 1.内置模块:Python自带的标准模块(可使用help('modules’)查看Python自带模块列表) 2.第三方开源模块:可以通 ...

  5. Celery学习--- Celery在项目中的使用

    可以把celery配置成一个应用,注意连接文件命名必须为celery.py 目录格式如下 项目前提: 安装并启动Redis CeleryPro/celery.py   [命名必须为celery.py] ...

  6. 铁乐学python_Day44_IO多路复用

    目录 IO模型介绍 阻塞IO(blocking IO) 非阻塞IO(non-blocking IO) 多路复用IO(IO multiplexing) 异步IO(Asynchronous I/O) IO ...

  7. php 导出

    //导出 //放在model层的类 <?phpnamespace frontend\models; use yii\base\model; /** * @copyright (c) 2014 a ...

  8. webshell扫描

    可扫描 weevelyshell 生成 或加密的shell 及各种变异webshell 目前仅支持php 支持扫描 weevelyshell 生成 或加密的shell 支持扫描callback一句话s ...

  9. THE CUP OF LIFE即生命之杯。

    生命之杯 编辑 THE CUP OF LIFE即生命之杯. <生命之杯>(西班牙语:La copa de la vida,英语:The Cup of Life)是一首由波多黎各裔歌手瑞奇· ...

  10. ord 字符转code chr : code转字符

    print(ord('刀')) # ord 字符转Unicode # 20992 print(chr(20992)) # Unicode 转成chr(字符)