div+css 动态分页效果
业务逻辑就不给了，就给个index.jsp吧index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><%@ taglib prefix="s" uri="/struts-tags"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <title>分页</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <link rel="stylesheet" type="text/css" href="css/styles.css"></head><body> <table border="1px" width="200px" align="center"><tr><td>id</td><td>name</td></tr> <s:iterator value="#request.users"><tr><td>${id}</td><td>${name}</td></tr></s:iterator></table> <table align="center"><tr><td>一共有${page}页。 当前是第${offset}页。</td></tr><tr><td><s:if test="#request.offset>1"><a href="ListUsers?page=${offset-2}">上一页</a></s:if><s:if test="#request.offset<#request.page"><a href="ListUsers?page=${offset}">下一页</a></s:if><a href="ListUsers?page=0">首页</a><a href="ListUsers?page=${page-1}">末页</a></td></tr></table><br/><br/><br/><div class="green-black"> <s:if test="#request.offset>1"><a href="ListUsers?page=0">&lt;&lt;</a></s:if><s:if test="#request.offset>3"><a href="ListUsers?page=${offset-4}">${offset-3}</a></s:if><s:if test="#request.offset>2"><a href="ListUsers?page=${offset-3}">${offset-2}</a></s:if><s:if test="#request.offset>1"><a href="ListUsers?page=${offset-2}">${offset-1}</a></s:if><span class="current">${offset}</span><s:if test="#request.offset<#request.page"><a href="ListUsers?page=${offset}">${offset+1}</a></s:if><s:if test="#request.offset+1<#request.page"><a href="ListUsers?page=${offset+1}">${offset+2}</a></s:if><s:if test="#request.offset+2<#request.page"><a href="ListUsers?page=${offset+2}">${offset+3}</a></s:if><s:if test="#request.offset+3<#request.page"><a href="ListUsers?page=${page-1}">&gt;&gt; </a></s:if><span class="total">共${page}页</span></div><br/><br/><br/><div class="green-black"> <s:if test="#request.offset>1"><a href="ListUsers?page=0">&lt;&lt;</a></s:if><s:if test="#request.offset>2"><a href="ListUsers?page=${offset-3}">${offset-2}</a></s:if><s:if test="#request.offset>1"><a href="ListUsers?page=${offset-2}">${offset-1}</a></s:if><span class="current">${offset}</span><s:if test="#request.offset<#request.page"><a href="ListUsers?page=${offset}">${offset+1}</a></s:if><s:if test="#request.offset+1<#request.page"><a href="ListUsers?page=${offset+1}">${offset+2}</a></s:if><s:if test="#request.offset+3<#request.page"><span>...<span><a href="ListUsers?page=${page-2}">${page-1}</a><a href="ListUsers?page=${page-1}">${page}</a></s:if><s:if test="#request.offset<#request.page"><a href="ListUsers?page=${page-1}">&gt;&gt; </a></s:if></div></body></html>
css 代码
BODY {FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;WIDTH: 60%;PADDING-LEFT: 25px;}/*CSS green-black style pagination*/DIV.green-black {PADDING-RIGHT: 3px;PADDING-LEFT: 3px;PADDING-BOTTOM: 3px;MARGIN: 3px;PADDING-TOP: 3px;TEXT-ALIGN: center}DIV.green-black A {BORDER-RIGHT: #2c2c2c 1px solid;PADDING-RIGHT: 5px;BORDER-TOP: #2c2c2c 1px solid;PADDING-LEFT: 5px;BACKGROUND: url(images/pageimage1.gif) #2c2c2c;PADDING-BOTTOM: 2px;BORDER-LEFT: #2c2c2c 1px solid;COLOR: #fff;MARGIN-RIGHT: 2px;PADDING-TOP: 2px;BORDER-BOTTOM: #2c2c2c 1px solid;TEXT-DECORATION: none}DIV.green-black A:hover {BORDER-RIGHT: #aad83e 1px solid;BORDER-TOP: #aad83e 1px solid;BACKGROUND: url(images/pageimage2.gif) #aad83e;BORDER-LEFT: #aad83e 1px solid;COLOR: #fff;BORDER-BOTTOM: #aad83e 1px solid}DIV.green-black A:active {BORDER-RIGHT: #aad83e 1px solid;BORDER-TOP: #aad83e 1px solid;BACKGROUND: url(images/pageimage2.gif) #aad83e;BORDER-LEFT: #aad83e 1px solid;COLOR: #fff;BORDER-BOTTOM: #aad83e 1px solid}DIV.green-black SPAN.current {BORDER-RIGHT: #aad83e 1px solid;PADDING-RIGHT: 5px;BORDER-TOP: #aad83e 1px solid;PADDING-LEFT: 5px;FONT-WEIGHT: bold;BACKGROUND: url(images/pageimage2.gif) #aad83e;PADDING-BOTTOM: 2px;BORDER-LEFT: #aad83e 1px solid;COLOR: #fff;MARGIN-RIGHT: 2px;PADDING-TOP: 2px;BORDER-BOTTOM: #aad83e 1px solid}DIV.green-black SPAN.total {BORDER-RIGHT: #2c2c2c 1px solid;PADDING-RIGHT: 5px;BORDER-TOP: #2c2c2c 1px solid;PADDING-LEFT: 5px;BACKGROUND: url(images/pageimage1.gif) #2c2c2c;PADDING-BOTTOM: 2px;BORDER-LEFT: #2c2c2c 1px solid;COLOR: #fff;MARGIN-RIGHT: 2px;PADDING-TOP: 2px;BORDER-BOTTOM: #2c2c2c 1px solid;TEXT-DECORATION: none}
页:
[1]