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 的运行原理和插件的工作方式 ...
随机推荐
- 成功解决JSP和Servlet的中文乱码问题
表单提交时出现乱码: 在进行表单提交的时候,经常提交一些中文,自然就避免不了出现中文乱码的情况,对于表单来说有两种提交方式:get和post提交方式.所以请求的时候便有get请求和post请求.以前我 ...
- javascript与python的比较
1:javascript与python大小写皆敏感 2:javascript使用{}来组织代码块,与大部分语言相同 python使用缩进来组织代码块,与大部分语言不同,请务必遵守约定俗成的习惯,坚持 ...
- Hibernate学习--hibernate延迟加载原理-动态代理(阿里电面)
在正式说hibernate延迟加载时,先说说一个比较奇怪的现象吧:hibernate中,在many-to-one时,如果我们设置了延迟加载,会发现我们在eclipse的调试框中查看one对应对象时,它 ...
- oracle 如何查看pga
进去命令行 输入 sqlplus username/password@dbname 回车 进入数据库输入 show parameter pga 回车
- CODECHEF Chef and Churus 解题报告
[CODECHEF]Chef and Churus Description 有一个长度为\(n\)的数组\(A\),有\(n\)个函数,第\(i\)个函数的值为\(\sum_{j=l_i}^{r_i} ...
- Redis的键值命令、服务器命令
Redis提供了丰富的命令对数据库和各种数据类型进行操作,这些命令可以在Linux 终端使用.在编程时,比如各类语言包,这些命令都有对应的方法. 键值命令 服务器命令 获取数据库中所有键名 >k ...
- smb(ms17-010)远程命令执行之msf
本次用到的环境: kali(2016.2)32位系统.ip地址:192.168.1.104 目标靶机为:win7sp1x64系统(关闭防火墙),ip地址:192.168.1.105 具体的步骤如下: ...
- git push要输入密码问题
git push突然每次都要输入密码了,这个问题困扰了两天,要无密码push,要保证两点. 1. git clone的url一定得是git开头的,不能是https开头的,这个容易被忽略,github ...
- [持续更新][备份]GDB调试工具常用命令
一.前言 ACM开赛在即,得知dev-cpp不适用之后,不得不再次重拾gdb基本操作... 辗转Emacs和Code::blocks数次之后,感觉还是Emacs更适合我的风格,尽管配置稍显麻烦,但其开 ...
- C++之高级编程20170914
/*************************************************************************************************** ...