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 的运行原理和插件的工作方式 ...
随机推荐
- 【leetcode】198.HouseRobber
198.HouseRobber You are a professional robber planning to rob houses along a street. Each house has ...
- tomcat下部署了多个项目启动报错java web error:Choose unique values for the 'webAppRootKey' context-param in your web.xml files
应该是tomcat下部署了多个项目且都使用log4j. <!--如果不定义webAppRootKey参数,那么webAppRootKey就是缺省的"webapp.root". ...
- web三大组件的加载顺序
Web三大组件:过滤器组件 监听器组件 Servlet组件 过滤器的顶级接口:javax.servlet.Filter 监听器的顶级接口:javax.servlet.ServletContextL ...
- CentOS 7 开放3306端口访问
CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙.1.关闭firewall:systemctl stop firewalld.servicesystemctl ...
- @Retention(保留) 此注解用于运行时候(反射)时候使用 如果不使用的话 在反射时候无法获取到注解的值
@Retention(保留) 此注解用于运行时候(反射)时候使用 如果不使用的话 在反射时候无法获取到注解的值
- svn和git的区别及适用场景
svn和git的区别及适用场景 来源 https://blog.csdn.net/wz947324/article/details/80104621 svn的优势: 优异的跨平台支持,对windows ...
- Wifi密码破解实战
原文链接地址:http://www.freebuf.com/articles/wireless/127261.html https://www.baidu.com/?tn=98012088_4_dg& ...
- 洛谷5月月赛T30212 玩游戏 【分治NTT + 多项式求ln】
题目链接 洛谷T30212 题解 式子很容易推出来,二项式定理展开后对于\(k\)的答案即可化简为如下: \[k!(\sum\limits_{i = 0}^{k} \frac{\sum\limits_ ...
- bzoj2054: 疯狂的馒头(并查集)
每个区间只被覆盖一次,求每个点被哪种区间覆盖或者某个区间是否已经被覆盖过都可以用并查集做. 做法:每个点都指向当前被覆盖区间的右端点+1的位置,某个点的下一个没被覆盖的点是gf(i),同理如果某个区间 ...
- codeforces gym101243 A C D E F G H J
gym101243 A #include<iostream> #include<cstdio> #include<cmath> #include<cstrin ...