zoukankan      html  css  js  c++  java
  • jstl+bootstrap-2.2.1分页组建 ------- 第一版

    效果图:

    <div id="paging" class="pagination pagination-right" >
    		  			<ul>
    		  				<c:choose>
    		  				<c:when test="${pageBean.currentPage > 1}">
    		  					<li><a href="javascript:changePage(${pageBean.currentPage-1 });"><i class="icon-fast-backward"></i></a></li>
    		  				</c:when>
    		  				</c:choose>
    		  				
    		  				
    		  				<c:choose>
    		  				<c:when test="${pageBean.pageCounts != 1}">
    		  					<c:if test="${pageBean.currentPage==1}">
    		  					<li><a style="background-color: #FFFADA;">1</a></li>
    		  					</c:if>
    		  					<c:if test="${pageBean.pageCounts!=null and pageBean.currentPage!=1}">
    		  					<li><a href="javascript:changePage(1);">1</a></li>
    		  					</c:if>
    		  				</c:when>
    		  				<c:when test="${pageBean.pageCounts == 1}">
    		  					<li><a style="background-color: #FFFADA;");">${pageBean.pageCounts}</a></li>
    		  				</c:when>
    		  				</c:choose>
    		  				
    		  				
    		  				
                        	<c:forEach begin="1" end="${pageBean.pageCounts}" varStatus="i">
                        		<c:choose>
                        		<c:when test="${pageBean.currentPage ==i.index and pageBean.currentPage!=pageBean.pageCounts and pageBean.currentPage!=1}">
                        			<li><a style="background-color: #FFFADA;">${i.index } </a></li>
                        		</c:when>
                        		<c:otherwise>
                        		<!-- 左侧 -->
                        		<c:if test="${pageBean.currentPage > 4 and pageBean.currentPage - i.index<4 and pageBean.currentPage >i.index}">
                        			<li><a href="javascript:changePage(${i.index });">${i.index } </a></li>
                        		</c:if>
                        		<c:if test="${pageBean.currentPage < 5 and pageBean.currentPage - i.index<3 and pageBean.currentPage > i.index and  i.index > 1}">
                        			<li><a href="javascript:changePage(${i.index });">${i.index } </a></li>
                        		</c:if>
                        		<!-- 右侧 -->
                        		<c:if test="${pageBean.pageCounts-pageBean.currentPage>4 and i.index - pageBean.currentPage <4 and i.index> pageBean.currentPage }">
                        			<li><a href="javascript:changePage(${i.index });">${i.index } </a></li>
                        		</c:if>
                        		<c:if test="${pageBean.pageCounts-pageBean.currentPage<5 and i.index - pageBean.currentPage <3 and i.index> pageBean.currentPage and i.index<pageBean.pageCounts }">
                        			<li><a href="javascript:changePage(${i.index });">${i.index } </a></li>
                        		</c:if>
                        		</c:otherwise>
                        		</c:choose>
                        	</c:forEach>
                        	
                        	<c:choose>
                        	<c:when test="${pageBean.pageCounts != 1}">
    		  					<c:if test="${pageBean.pageCounts!=null and pageBean.currentPage==pageBean.pageCounts}">
    		  					<li><a style="background-color: #FFFADA;">${pageBean.pageCounts}</a></li>
    		  					</c:if>
    		  					<c:if test="${pageBean.pageCounts != 0 and pageBean.currentPage!=pageBean.pageCounts}">
    		  					<li><a href="javascript:changePage(${pageBean.pageCounts});">${pageBean.pageCounts}</a></li>
    		  					</c:if>
    		  				</c:when>
    		  				</c:choose>
    		  				
                        	
                        	<c:if test="${pageBean.pageCounts != 0 and pageBean.currentPage != pageBean.pageCounts}">
                        		<li><a href="javascript:changePage(${pageBean.currentPage+1 });"><i class="icon-fast-forward" ></i></a></li>
                        	</c:if>
    					</ul>
    				</div>
    
  • 相关阅读:
    【sqli-labs】 less61 GET -Challenge -Double Query -5 queries allowed -Variation4 (GET型 挑战 双查询 只允许5次查询 变化4)
    Spring overview
    Code First use dotConnect for MySQL
    讓 MySQL 能夠用 EF6
    Sublime Text 3 常用插件以及安装方法(转)
    EntityFramework 6.0< Code First > 连接 Mysql数据库(转)
    bootstrap 2.3版与3.0版的使用区别
    用google-code-prettify高亮代码
    MVC中的@Html.DisplayFor等方法如何控制日期的显示格式(转)
    给Jquery easyui 的datagrid 每行增加操作链接(转)
  • 原文地址:https://www.cnblogs.com/xuzhenmin/p/3544014.html
Copyright © 2011-2022 走看看