结合Bootstrap的分页插件实现分页,其中策略是每次显示5个按钮,然后根据当前页的不同来进行不同的显示:

1. 当前页<3,如果当前页大于5页就显示前五页,不然就显示1~totalPage。

2. 当前页<=3 && <=totalPage-3,显示当前页往前两,往后两页,即 currentPage-2, currentPage-1, currentPage, currentPage+1, currentPage+2

3. 当前页>=totalPage-2时,如果页数够的话就显示最后5页,否则的话就从第一页开始显示1~totalPage页。

效果大概是这样的:

代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <div class="paging">
<nav aria-label="Page navigation">
<ul class="pagination"> <!-- 当前页不为第一页时显示前一页 -->
<c:if test="${page.pageNumber!=1 && page.totalPage>1 }">
<li>
<a href="<c:url value="${paginationLocation }?pageNumber=${page.pageNumber-1 }${paginationParams ? '&'+paginationParams : '' }"/>" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
</c:if> <%-- 根据不同的情况显示分页 --%>
<c:choose> <%-- 当总页数大于1时才显示分页按钮 --%>
<c:when test="${page.totalPage<=1 }">
</c:when> <%-- 当前页<=3 && <=total-3,普通显示 --%>
<c:when test="${page.pageNumber>=3 && page.totalPage-page.pageNumber>=3 }">
<c:forEach begin="${page.pageNumber-2 }" end="${page.pageNumber+2 }" var="index">
<li <c:if test="${page.pageNumber==index }">class="active"</c:if>>
<a href="<c:url value="${paginationLocation }?pageNumber=${index }${paginationParams ? '&'+paginationParams : '' }"/>">${index }</a>
</li>
</c:forEach>
</c:when> <%-- 当<3时显示 --%>
<c:when test="${page.pageNumber<3 }">
<c:forEach begin="1" end="${page.totalPage<5 ? page.totalPage : 5 }" var="index">
<li <c:if test="${page.pageNumber==index }">class="active"</c:if>>
<a href="<c:url value="${paginationLocation }?pageNumber=${index }${paginationParams ? '&'+paginationParams : '' }"/>">${index }</a>
</li>
</c:forEach>
</c:when> <%-- 当>=totalPage-2,显示最后5页 --%>
<c:when test="${page.totalPage-page.pageNumber<3}">
<c:forEach begin="${(page.totalPage-5<1) ? 1 : (page.totalPage-5) }" end="${page.totalPage }" var="index">
<li <c:if test="${page.pageNumber==index }">class="active"</c:if>>
<a href="<c:url value="${paginationLocation }?pageNumber=${index }${paginationParams ? '&'+paginationParams : '' }"/>">${index }</a>
</li>
</c:forEach>
</c:when> </c:choose> <!-- 当不为最后一页时显示下一页按钮 -->
<c:if test="${page.pageNumber!=page.totalPage && page.totalPage>1}">
<li>
<a href="<c:url value="${paginationLocation }?pageNumber=${page.pageNumber+1 }${paginationParams ? '&'+paginationParams : '' }"/>" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</c:if> </ul>
</nav>
</div>

因为include过来的可以共享当前页中的变量,所以只需要在当前页中声明变量在被引入的分页片段中也可以访问得到,相当于是传参数了,引入分页:

<!-- 引入分页 -->
<c:set var="paginationLocation" value="/companyHr/myCompanyEntry" />
<%@include file="/WEB-INF/jsp/commons/pagination/pagination.jspf" %>

.paging是为了让其居中:

/*分页一直是固定大小并且居中的*/
.paging{
width:400px;
margin:0px auto;
}

其它相关依赖自行引入。

.

JSP分页之结合Bootstrap分页插件进行简单分页的更多相关文章

  1. 利用Bootstrap Paginator插件和KnockoutJS完成分页功能

    在最近一个项目中,需要结合一堆条件查询并对查询的结果数据完成一个简单分页功能,可是做着做着,自己的思路越来越模糊,做到心态崩溃!!! 哈哈,特此花点时间重新总结,并从最简单的分页,然后向多条件查询分页 ...

  2. C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

  3. 使用Vs2005打造简单分页浏览器(1)原创

    原文:使用Vs2005打造简单分页浏览器(1)原创 使用Vs2005打造简单分页浏览器(1)原创1引言2功能3实现过程以及关键点4总结5不足之处6其他7 代码下载 1    引言很早就有搞一个浏览器的 ...

  4. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  5. bootstrap-paginator分页插件的简单使用实例

    Document 21:36:40 简述:bootstrap-paginator是一款基于bootstrap的jQuery分页插件. githup项目地址:https://github.com/lyo ...

  6. 基于Bootstrap的Asp.net Mvc 分页

    基于Bootstrap的Asp.net Mvc 分页的实现 最近写了一个mvc 的 分页,样式是基于 bootstrap 的 ,提供查询条件,不过可以自己写样式根据个人的喜好,以此分享一下.首先新建一 ...

  7. pager-taglib插件进行普通分页

        基于Spring+ibatis+Struts+pager-taglib分页技术 pager-taglib是一款支持多种风格的分页显示.     先简单介绍一下Pager-taglib.实际上, ...

  8. Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

    Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...

  9. mybatis插件机制及分页插件原理

    MyBatis 插件原理与自定义插件: MyBatis 通过提供插件机制,让我们可以根据自己的需要去增强MyBatis 的功能.需要注意的是,如果没有完全理解MyBatis 的运行原理和插件的工作方式 ...

随机推荐

  1. Spring 学习7 -事务

    1 初步理解 理解事务之前,先讲一个你日常生活中最常干的事:取钱. 比如你去ATM机取1000块钱,大体有两个步骤:首先输入密码金额,银行卡扣掉1000元钱:然后ATM出1000元钱.这两个步骤必须是 ...

  2. 【前端学习笔记05】JavaScript数据存储Cookie相关方法封装

    //Cookie设置 //设置新cookie function setCookie(name,value,duration){ var date = new Date(); date.setTime( ...

  3. NoSQL - Redis应用场景

         问题的引入 DB(Oracle.MySQL.Postgresql等)+Memcached 这种架构模式在我们生产环境中十分常见,一般我们通过Memcached将热点数据加载到cache,应用 ...

  4. React安装React Devtools调试工具

    在运行一个React项目的时候浏览器控制台会提醒你去安装react devtools调试工具. Download the React DevTools for a better development ...

  5. liunx 用户和用户组的命令

    查看用户列表     /etc/passwd  查看用户组列表 /etc/group 用户和用户组管理 groupadd groups 新增用户组 groupmod -n newgroupsr gro ...

  6. vue使用过程中的一些小技巧

    这些也是自己平时项目中遇到过的一些问题,看到有人整理了出来,也就转载保存一下 文章内容总结: 组件style的scoped Vue 数组/对象更新 视图不更新 vue filters 过滤器的使用 列 ...

  7. 使用oVal进行Java Bean 验证的注意事项

    如果需要不同条件验证不同的属性的时候,需要使用profiles属性,每个校验注解符中都有.注意:oVal默认是启用所有的profiles,所以在对单独一个profile进行启用的时候,需要先disab ...

  8. 【POJ2891】Strange Way to Express Integers(拓展CRT)

    [POJ2891]Strange Way to Express Integers(拓展CRT) 题面 Vjudge 板子题. 题解 拓展\(CRT\)模板题. #include<iostream ...

  9. 解题:POI 2012 Cloakroom

    题面 首先,单独处理每个询问复杂度显然不可承受,还是考虑通过排序使得限制更容易达到:按照$a$将物品排序,按照$m$将询问排序,这样肯定是要不断添加物品才能达到要求,顺着做一遍就行了 然后发现$b$的 ...

  10. HDU4003 树形DP

    题意 :给一棵n个节点的树, 节点编号为1~n, 每条边都有一个花费值.        有k个机器人从S点出发, 问让机器人遍历所有边,最少花费值多少? 这题最难的地方应该就是如何定义状态了 定义dp ...