分页Bootstrap实现
<%@ include file="/init.jsp" %>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="jquery-ui.min-1.11.4.js"></script>
<meta charset="utf-8" />
<link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<style type="text/css">
.root-right {
float: right;
margin-top: 10px;
}
</style>
<ul class="pagination">
<%
Locale pagelocale = PortalUtil.getLocale(renderRequest);
Integer pageCount = (Integer)renderRequest.getAttribute("pageCount");
Integer pageNo = (Integer)renderRequest.getPortletSession().getAttribute("pageNo");
if(pageCount != null && pageNo != null){
if(pageCount > 1 && !pageNo.equals(Integer.valueOf(1))) {
%>
<li><a class="crm-page-previous" href='javascript:entityPage("<%=pageNo - 1%>")'>«</a></li>
<% }
if(pageCount <= 10) {
for (int i = 0; i < pageCount; i++) {
if(Integer.valueOf(i+1).equals(pageNo)) {
if(!pageCount.equals(Integer.valueOf(1))){
%>
<li class="active"><a href='javascript:entityPage(<%=pageNo %>)'><%=pageNo %></a></li>
<%
}
i = i+1;
if(pageNo.equals(pageCount))
break;
}
%>
<li><a class="crm-page" href='javascript:entityPage(<%=i + 1 %>)'> <%= i + 1 %> </a></li>
<%
}
} else if(pageCount <= 20) {
int l = 0;
int r = 0;
if(pageNo < 5) {
l = pageNo - 1;
r = 10 - l - 1;
}else if(pageCount-pageNo < 5) {
r = pageCount - pageNo;
l = 10 - 1 - r;
}else {
l = 4;
r = 5;
}
int tmp = pageNo - l;
for (int i = tmp; i < tmp + 10; i++) {
if(Integer.valueOf(i).equals(pageNo)) {
if(!pageCount.equals(Integer.valueOf(1))){%>
<li class="active"><a href='javascript:entityPage(<%=pageNo %>)'><%=pageNo %></a></li>
<%
}
i = i+1;
if(pageNo.equals(pageCount)) break;
}
%>
<li><a class="crm-page" href='javascript:entityPage(<%=i %>)'> <%=i %> </a></li><%
}
} else if(pageNo < 7) {
for (int i = 0; i < 8; i++) {
if(Integer.valueOf(i+1).equals(pageNo)) {%>
<li class="active"><a href='javascript:entityPage(<%=pageNo %>)'><%=pageNo %></a></li><%
i = i+1;
}
%>
<li><a class="crm-page" href='javascript:entityPage(<%=i+1 %>)'> <%=i+1%> </a></li><%
}
%>
<li><a class="crm-page" href='javascript:entityPage(<%=pageCount - 1 %>)'><%=pageCount - 1 %> </a></li>
<li><a class="crm-page" href='javascript:entityPage(<%=pageCount %>)'> <%=pageCount %> </a></li><%
} else if(pageNo > pageCount - 6) {%>
<li><a class="crm-page" href='javascript:entityPage(<%=1 %>)'> 1 </a></li>
<li><a class="crm-page" href='javascript:entityPage(<%=2 %>)'> 2 </a></li>
<%
for (int i = pageCount-8; i <pageCount ; i++) {
if(Integer.valueOf(i+1).equals(pageNo)) { %>
<%
i = i+1;
if(pageNo.equals(pageCount)) break;
}
%>
<li><a class="crm-page" href='javascript:entityPage(<%=i+1 %>)'> <%= i + 1 %></a></li>
<%
}
} else {%>
<li><a class="crm-page" href='javascript:entityPage(<%=1 %>)'> 1 </a></li>
<li><a class="crm-page" href='javascript:entityPage(<%=2 %>)'> 2 </a></li>
<li><a class="crm-page" href='javascript:entityPage(<%=pageNo - 2 %>)'> <%=pageNo - 2 %></a></li>
<li><a class="crm-page" href='javascript:entityPage(<%=pageNo - 1 %>)'> <%=pageNo - 1 %></a></li>
<li class="active"><a href='javascript:entityPage(<%=pageNo %>)'><%=pageNo %></a></li>
<li><a class="crm-page" href='javascript:entityPage(<%=pageNo + 1 %>)'> <%=pageNo + 1 %></a></li>
<li><a class="crm-page" href='javascript:entityPage(<%=pageNo + 2 %>)'><%=pageNo + 2 %></a></li>
<li><a class="crm-page" href='javascript:entityPage(<%=pageCount - 1 %>)'> <%=pageCount - 1 %></a></li>
<li><a class="crm-page" href='javascript:entityPage(<%=pageCount %>)'> <%=pageCount %> </a></li>
<%
}
if(!pageNo.equals(pageCount) && pageCount > 1) {%>
<li><a class="crm-page-home" href='javascript:entityPage(<%=pageNo + 1 %>)'>»</a></li>
<%
}
%>
<div class="root-right">
<label>
<%=LanguageUtil.get(PortletIDs.INITIALIZATION, pagelocale, "page.total")%> <%=pageNo.equals(Integer.valueOf(0)) ? 1 : pageCount %> <%=LanguageUtil.get(PortletIDs.INITIALIZATION, pagelocale, "page.page")%>,
<%=LanguageUtil.get(PortletIDs.INITIALIZATION, pagelocale, "page.current")%> <%=pageNo %> <%=LanguageUtil.get(PortletIDs.INITIALIZATION, pagelocale, "page.page")%>
</label>
</div>
<%
}
%>
</ul>
分页Bootstrap实现的更多相关文章
- Bootstrap <基础十九>分页
Bootstrap 支持的分页特性.分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. 分页(Pagination) 下表列出了 Bootstrap 提 ...
- Bootstrap <基础三十二>模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
- Bootstrap <基础三十一>插件概览
在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...
- Bootstrap <基础三十>Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...
- Bootstrap <基础二十九>面板(Panels)
Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...
- Bootstrap <基础二十八>列表组
列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...
- Bootstrap<基础二十七> 多媒体对象(Media Object)
Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...
- Bootstrap <基础二十六>进度条
Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...
- Bootstrap <基础二十五>警告(Alerts)
警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...
随机推荐
- NC 的简单使用
netcat被誉为网络安全界的’瑞士军刀’,相信没有什么人不认识它吧……一个简单而有用的工具,透过使用TCP或UDP协议的网络连接去读写数据.它被设计成一个稳定的后门工具,能够直接由其它程序和脚本轻松 ...
- 笨鸟就要勤奋&专注
最近两天在找工作的过程中颇受打击,两家高大上的公司看起来就是要收集世界上最聪明的人~,在参加G家的online test之前还天真的认为一不小心通过了怎么办呢?考完试之后才发现真的是想多了,关于题目看 ...
- 使用zsh 替换 bash
摘自:http://macshuo.com/?p=676#wechat_redirect Shell是Linux/Unix的一个外壳,你理解成衣服也行.它负责外界与Linux内核的交互,接收用户或其他 ...
- 【CF865C】Gotta Go Fast 二分+期望DP
[CF865C]Gotta Go Fast 题意:有n个关卡需要依次通过,第i关有pi的概率要花ai时间通过,有1-pi的概率要花bi时间通过,你的目标是花费不超过m的时间通关,每一关开始时你都可以选 ...
- 9.6Django
2018-9-6 12:56:32 2018-9-6 18:32:22 把那个用户列表的页面优化了一下!用了老师更好看的页面,但是功能还是那些! 就是修改一下url就好! 放在我我的github : ...
- Kafka在Linux上安装部署及样例测试
Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计.这个独特的设计是什么样的呢 介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了 ...
- 50.TO_NUMBER 将给出的字符转换为数字
.SYSDATE 用来得到系统的当前日期 SQL> select to_char(sysdate,dd-mm-yyyy day) from dual; TO_CHAR(SYSDATE, ---- ...
- 0005python中的静态方法和类方法
#!/usr/bin/env python# coding=utf-8 __metaclass__ = type class StaticMethod: @staticmethod def foo() ...
- VMware esxi 5.5装机方案
1.测试环境下,VMware esxi 5.5环境基本配置如下(主机环境以实际为准): 2.裸机安装VMware esxi 5.5步骤: 1)将ESXi安装程序CD/DVD 插入 CD/DVD-ROM ...
- Oracle备份恢复之冷备份恢复与异机还原
(同平台:rhel6.4~rhel6.4:同版本:oracle 11g 11.2.0.1~ oracle 11g 11.2.0.1) 冷备份发生在数据库关闭状态下,直接拷贝物理文件的备份方式,备份数据 ...