注意：

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

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. Opengl---gluLookAt函数详解(转)

    转自 http://www.cnblogs.com/jiangu66/archive/2013/04/06/3003122.html 下面的一段摘自百度百科: 视点转换 函数原型 void gluLo ...

  2. hibernate连接mysql，查询条件中有中文时，查询结果没有记录，而数据库有符合条件的记录（解决方法）

    今天在另一台服务器上重新部署了网站,结果出现了以下问题: ——用hibernate做mysql的数据库连接时,当查询条件中有中文的时候,查询结果没有记录,而数据库中是存在符合条件的记录的. 测试了以下 ...

  3. virtual memory exhausted: Cannot allocate memory 解决方法

    在阿里云买了个云服务器,内存1G.编译kudu时出现下面的错误: virtual memory exhausted: Cannot allocate memory 问题原因:由于物理内存本身很小,且阿 ...

  4. MFC调试时可以，使用生产的exe时，显示未响应解决方案

    首先,使用release模式,生成解决方案和exe. 对生成的exe,选择属性,兼容性,win7,应用,即可解决. 此方法对debug无用

  5. #003 React 组件 继承 自定义的组件

    主题:React组件 继承 自定义的 组件 一.需求说明 情况说明: 有A,B,C,D 四个组件,里面都有一些公用的逻辑,比如 设置数据,获取数据,有某些公用的的属性,不想在 每一个 组件里面写这些属 ...

  6. 汉诺塔问题php解决

    面向过程解决 <?php function hanio($n,$x,$y,$z){//把n个盘子,按照要求从x移到z,y是中介 //递归跳出条件 if($n==1){ move($n, $x, ...

  7. 解析JS运动

    解析JS运动 物体运动原理:通过改变物体的位置,而发生移动变化. 任何运动都是相对的,就像物理中的运动公式:s(要达到的)=s0(当前的样式值)+vt. 方法:      1.运动的物体使用绝对定位 ...

  8. SICP 习题 （1.34）解题总结

    SICP 习题 1.34的题目比較特别一点.对于没有接触过高阶函数的同学们来说是个非常好的学习机会. 题目是这种,假设我们定义以下的过程: (define (f g)   (g 2)) 那么就有: ( ...

  9. Java常用的快捷键

    // // (1)Ctrl+Space // 说明:内容助理.提供对方法,变量,参数,javadoc等得提示, // 应运在多种场合,总之需要提示的时候可先按此快捷键. // 注:避免输入法的切换设置 ...

  10. 初识Qt文字绘制

    1.新建一个Qt Gui应用,项目名称为myDraw,基类选择为QMainWindow,类名设置为MainWindow. 2.在mainwindow.h头文件中添加void paintEvent(QP ...