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>

测试效果：

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/kinome/p/9009294.html