springmvc pager-taglib 分页，bootstrap样式

注意：

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

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样式的更多相关文章

jqgrid+bootstrap样式实践
jqgrid+bootstrap样式实践,报错数据加载,选中,删除等功能需要引入的样式 bootstrap.min.css ui.jqgrid.css 需要引入的JS jquery.min.js b ...
asp.net mvc 简易通用自定义Pager实现分页
asp.net mvc 自定义Pager实现分页 Intro 一个WEB应用程序中经常会用到数据分页,本文将实现一个简单通用的分页组件,包含一个 PagerModel (用来保存页码信息),一个 Ht ...
从覆盖bootstrap样式谈css选择器优先级
样式优先级首先简单说几个定义样式的方式: 元素内嵌: <li><a href="" style="color:#ffffff;">SH ...
自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...
springMVC源码分析--动态样式ThemeResolver（二）
在上一篇博客springMVC源码分析--动态样式ThemeResolver(一)中我们介绍了多样式ThemeResolver的使用方法,接下来我们对源码进行简单的分析一下. ThemeResolve ...
datatables 配套bootstrap样式使用小结（2） ajax篇
距离上一篇有点时间了,周末做了伴郎参加了一个土豪同学的婚礼. 上一篇是介绍一下基本的用法,基本的原理是取出所有的数据,然后调用$.datatables(option)方法格式化,这种方法显然不太科学, ...
Yii2框架bootstrap样式理解
Yii2框架默认採用了bootstrap作为CSS风格,各种视图类组件都如此.之前一直採用默认风格,并在必要的时候加入或者改动一下class来达到目的.但在改版Yii1.1的orange项目时.发现之 ...
js 重写 bootstrap 样式 alert/confirm 消息窗口
相信很多人都受够了 alert.confirm 的样子,最近正在用 bootstrap 做项目,顺便封装了一个 bootstrap 样式的消息框. 实现起来很简单,bootstrap 本身就自带了 m ...
Angular中使用bootstrap样式
Angular中使用bootstrap样式 Angular中引入bootstrap的方法方法1:在Angular.json中的styles数组中添加bootstrap路径如下所示: " ...
利用vue v-bind属性绑定bootstrap样式以及输出数据
自从知道了bootstrap,就被他简介,大气美观的样式吸引,即使在vue框架中,仍旧想使用,下面给出了vue适配版和原版的代码,以飨读者数据输出部分 export default { data() ...

随机推荐

Skype for Business Server-呼叫质量仪表板（一）安装与配置
第一篇:安装与配置很多公司在运行过程中都遇到了难以追踪客服人员绩效的情况,公司没有有效的方法追踪员工在通过电话等远程方式解决客户问题.销售产品.客户关怀的情况.Skype for Business提 ...
.net 和 core 数据库连接字符串
Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\aspnet-xxxx.mdf;Initial Catalog= ...
Asp.net Core相关教程及开源项目推荐
入门全新的ASP.NET: https://www.cnblogs.com/Leo_wl/p/5654828.html 在IIS上部署你的ASP.NET Core项目: https://www.c ...
CSS-定位属性
Css学习——定位属性定位可以看作是一种分层,通过对页面中的各种元素进行定位,可以将某些元素放到其他元素的上层,并在浏览器的窗口中设置这些元素的具体位置. position属性以及Css所提供的4中 ...
HAproxy.md
HAProxy HAProxy是什么 HAProxy(High Available Proxy)是基于四层和七层的高可用负载均衡代理服务器,配置简单.支持多达上万条并发请求. HAProxy工作原理 ...
python第二十课——math模块中常用的函数
属性: e:自然数 pi:圆周率函数: ceil():向上取整 floor():向下取整 sqrt():开平方根 radians():角度转弧度 degrees():弧度转角度 import mat ...
Anaconda 安装和使用
最近看了些关于数据分析的书,想系统的整理下相关知识,算是学习笔记吧,也希望能帮到初学者. 1.Anaconda介绍安装python的方法有很多种,数据分析方面比较常用Anaconda.Anacond ...
RANSAC与最小二乘（LS, Least Squares）拟合直线的效果比较
代码下载地址: 1.Matlab版本:http://pan.baidu.com/s/1eQIzj3c.进入目录后,请自行定位到该博客的源代码与数据的目录“
c++——对象的构造和析构函数、构造函数的分类及调用
1构造函数和析构函数的概念有关构造函数 1构造函数定义及调用 1)C++中的类可以定义与类名相同的特殊成员函数,这种与类名相同的成员函数叫做构造函数: 2)构造函数在定义时可以有参数: 3)没有任何 ...
在文章详情页调用seo标题标签
在新闻的详情页,调用当前栏目的seo标题,原标签是:{dede:field.seotitle /} {dede:type} [field:seotitle/] {/dede:type} 修改 \inc ...

springmvc pager-taglib 分页，bootstrap样式

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

随机推荐

热门专题