JSP分页之结合Bootstrap分页插件进行简单分页
结合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">«</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">»</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分页插件进行简单分页的更多相关文章
- 利用Bootstrap Paginator插件和KnockoutJS完成分页功能
在最近一个项目中,需要结合一堆条件查询并对查询的结果数据完成一个简单分页功能,可是做着做着,自己的思路越来越模糊,做到心态崩溃!!! 哈哈,特此花点时间重新总结,并从最简单的分页,然后向多条件查询分页 ...
- C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi
C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
- 使用Vs2005打造简单分页浏览器(1)原创
原文:使用Vs2005打造简单分页浏览器(1)原创 使用Vs2005打造简单分页浏览器(1)原创1引言2功能3实现过程以及关键点4总结5不足之处6其他7 代码下载 1 引言很早就有搞一个浏览器的 ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- bootstrap-paginator分页插件的简单使用实例
Document 21:36:40 简述:bootstrap-paginator是一款基于bootstrap的jQuery分页插件. githup项目地址:https://github.com/lyo ...
- 基于Bootstrap的Asp.net Mvc 分页
基于Bootstrap的Asp.net Mvc 分页的实现 最近写了一个mvc 的 分页,样式是基于 bootstrap 的 ,提供查询条件,不过可以自己写样式根据个人的喜好,以此分享一下.首先新建一 ...
- pager-taglib插件进行普通分页
基于Spring+ibatis+Struts+pager-taglib分页技术 pager-taglib是一款支持多种风格的分页显示. 先简单介绍一下Pager-taglib.实际上, ...
- Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式
Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...
- mybatis插件机制及分页插件原理
MyBatis 插件原理与自定义插件: MyBatis 通过提供插件机制,让我们可以根据自己的需要去增强MyBatis 的功能.需要注意的是,如果没有完全理解MyBatis 的运行原理和插件的工作方式 ...
随机推荐
- 测试——约跑APP
项目名:约跑APP 用户需求规格说明书URL:http://www.cnblogs.com/liquan/p/6071804.html 组长博客URL:http://www.cnblogs.com/l ...
- JAVA字节流(读写文件)
InputStream此抽象类是表示字节输入流的所有类的超类.需要定义 InputStream 的子类的应用程序必须始终提供返回下一个输入字节的方法. int available()返回此输入流方法的 ...
- puppeteer设置代理并检查代理是否设置成功
1. 设置代理: 这一步超级简单,但我掉到了坑里并扑腾了小一天的时间,那就是:箭头指向处一定一定不要加空格!!! 2. 检查代理是否设置成功: 在打开的浏览器里,打开百度,输入ip,如果查出来的结果跟 ...
- Halcon 笔记2 Blob分析
1. 数组操作 2. 可视化-更新窗口 (1)单步模式-总是:则可以自动显示图像: (2)单步模式-从不:需要调用显示函数才能显示图像. (3)单步模式-清空显示:将原图清除,再显示新图 3. 图像处 ...
- SpringMVC源码剖析(五)-消息转换器HttpMessageConverter
原文链接:https://my.oschina.net/lichhao/blog/172562 #概述 在SpringMVC中,可以使用@RequestBody和@ResponseBody两个注解,分 ...
- 主流的RPC框架有哪些
RPC是远程过程调用的简称,广泛应用在大规模分布式应用中,作用是有助于系统的垂直拆分,使系统更易拓展.Java中的RPC框架比较多,各有特色,广泛使用的有RMI.Hessian.Dubbo等.RPC还 ...
- 第124天:移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
- Oracle 10g DG 环境搭建详解
环境描述:线上招聘库在物理机上,需要上云主机,于是申请两台云主机:由于云主机变态性,分配的云主机具有很多局限性:1.没有/tmp,2.没有 swap 3. /home 目录非常小:于是申请两块云硬盘, ...
- 题解 P1888 【三角函数】
堆排序万岁! 小金羊又来水题了 #include <iostream> #include <queue> using namespace std; priority_queue ...
- 函数式编程(1)-高阶变成(2)-filter
filter Python内建的filter()函数用于过滤序列. 和map()类似,filter()也接收一个函数和一个序列.和map()不同的时,filter()把传入的函数依次作用于每个元素,然 ...