分页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%>")‘>&laquo;</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 %>)‘>&raquo;</a></li>
        
          <%
    }
    %>
    &nbsp;&nbsp;
    <div class="root-right">
    <label>
        <%=LanguageUtil.get(PortletIDs.INITIALIZATION, pagelocale, "page.total")%>&nbsp;<%=pageNo.equals(Integer.valueOf(0)) ? 1 : pageCount %>&nbsp;<%=LanguageUtil.get(PortletIDs.INITIALIZATION, pagelocale, "page.page")%>,
        <%=LanguageUtil.get(PortletIDs.INITIALIZATION, pagelocale, "page.current")%>&nbsp;<%=pageNo %>&nbsp;<%=LanguageUtil.get(PortletIDs.INITIALIZATION, pagelocale, "page.page")%>
    </label>
    </div>
    <%
}
%>
        </ul>

时间: 2024-10-13 06:27:13

分页Bootstrap实现的相关文章

Yii 之分页 + bootstrap

controller $criteria = new CDbCriteria; $criteria->order = 'id asc'; //这边还可以写其他的sql语句 $count = Bankinfo::model()->count($criteria); $pages = new CPagination($count); $pages->pageSize = 1; $pages->applylimit($criteria); $bankinfos = Bankinfo::m

django jquery 分页 bootstrap

项目中需要实现数据查询,基于django的admin架构必然会很容易实现.不过在用户体验方面就会比较low了,因此需要自己实现类adminsite的效果.而且项目需要实现响应式所以bootstrap就成了首选.研究了一下午,基本上做好了技术准备. 1.资源 django-endless-pagination https://github.com/frankban/django-endless-pagination (1)优点 支持类twitter 和 digg的效果 代码基本

atitit。html&#160;css框架Bootstrap&#160;&#160;Foundation的比较与不同&#160;attilax大总结

atitit.html css框架Bootstrap  Foundation的比较与不同 attilax大总结 1. Bootstrap  Foundation的比较与不同1 2. Bootstrap 教程2 2.1. Bootstrap 简介2 2.2. Bootstrap CSS2 2.3. Bootstrap 布局组件2 2.4. Bootstrap 插件3 2.5. Bootstrap 其他3 3. Bootstrap 的attilax总结3 4. 参考3 1. Bootstrap  F

Bootstrap &lt;基础二十五&gt;警告(Alerts)

警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个可选的关闭按钮.为了创建一个内联的可取消的警告框,请使用 警告(Alerts) jQuery 插件. 您可以通过创建一个 <div>,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success..alert-info..alert-warning..ale

Bootstrap Table急速完美搭建后台管理系统

Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分页,以及编辑.导出.过滤(扩展)等等的功能:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 现在做的一个app管理以及后台配置系统,需要针对不同的城市作相应的定制化的配置,对一些后台数据也做一些展示和操作,所以每一个模块基本都会有表格的展现形式,这样做的好处就是直观方便操作.对于用什么t

Bootstrap &lt;基础二十六&gt;进度条

Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性,Opera 12 不支持动画. 默认的进度条 创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 <div>. 接着,在上面的 <div> 内,添加一个带有 class .prog

Bootstrap &lt;基础二十八&gt;列表组

列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 class .list-group-item. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的列表组</title> <link href="/boo

Bootstrap &lt;基础二十二&gt;超大屏幕(Jumbotron)

Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: 创建一个带有 class .jumbotron. 的容器 <div>. 除了更大的 <h1>,字体粗细 font-weight 被减为 200px. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <tit

Bootstrap &lt;基础二十一&gt;徽章(Badges)

Bootstrap 徽章(Badges).徽章与标签相似,主要的区别在于徽章的边角更加圆滑. 徽章(Badges)主要用于突出显示新的或未读的项.如需使用徽章,只需要把 <span class="badge"> 添加到链接.Bootstrap 导航等这些元素上即可. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 徽章(Badges)</ti