业务逻辑就不给了，就给个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"><<</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}">>> </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"><<</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}">>> </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
}
- 大小: 4.4 KB
分享到：
相关推荐
div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格 百分比表格(用DIV+CSS)以百分比显示，可以根据窗口的大小自动调节所显示的大小！ DIV+CSS+JS静态分页程序可兼容主流浏览器（IE、FF、Opera） DIV+CSS表格...
CSS（层叠样式表）则用于控制网页的外观和格式，包括颜色、字体、布局以及随着用户交互而改变的动态效果。在本例中，`<div>`和CSS的结合被用来设计分页导航，这是一种常见的网页元素，用于在大量内容之间进行导航，...
3. **动态效果**：为了增强用户体验，我们可以添加一些动态效果，如鼠标悬停时的改变颜色，或者点击时的过渡动画。使用`:hover`和`transition`属性可以轻松实现这一点： ``` .prev-page:hover, .next-page:hover, ...
Div+Css分页插件
怎么用aspnetpager.dll这个插件对服务器控件进行分页，今天与我大家分享一下asp.net利用存储过程和div+css实现分页（类似于博客园首页分页）
总结来说，这个"雅虎等大型网站div+css分页源码"提供了实际操作的例子，帮助开发者了解如何用`div+css`构建动态和响应式的分页系统。通过对HTML结构的组织，CSS样式的设定，以及图形资源的整合，可以创建出符合网站...
本资源包“精选多款DIV+CSS分页样式源码”聚焦于使用HTML的`<div>`标签配合CSS样式来实现各种美观且功能完备的分页效果。以下将详细介绍这个主题中的关键知识点。 1. **DIV标签**：在HTML中，`<div>`（division）是...
div+css 24种分页样式 可以生意修改
在网页设计领域，"div+css分页条"是一个常见的技术应用，用于在大量内容中实现分块展示，提高用户体验。这里的"div"是HTML中的一个布局容器元素，而"CSS"则是层叠样式表，用于定义网页的样式和布局。下面我们将详细...
为了突破这些限制，开发者经常使用`div`和`css`来模拟`select`下拉菜单，以实现更丰富的视觉效果和交互体验。这种技术被称为“div+css模拟select”。 一、为什么使用div+css模拟select？ 1. **样式可控**：使用...
Div+CSS是Web开发中不可或缺的技术，它在创建网页布局和实现动态效果方面扮演着重要角色。本篇将围绕"div+css很好的例子与特效"这一主题，深入探讨相关知识点，并结合提供的压缩包文件中的实例进行解析。 首先，Div...
在网页设计中，分页是一...总结一下，这个压缩包提供了24种div+css分页样例，涵盖了CSS3的多种应用，包括布局、样式和可能的交互效果。通过学习和实践，你可以提升网页设计技能，更好地掌握前端开发中的页面分页技术。
总结来说，"div+css3阶梯分页样式.zip"的资源利用了HTML来构建分页结构，CSS3来美化和增强视觉效果，而JavaScript和jQuery则赋予了分页动态交互性。这样的分页设计不仅提高了页面的美观度，也提升了用户的浏览体验。...
CSS则用于美化这些`div`，如设置背景图像、边框、间距，以及实现动态过渡和动画效果。通过浮动、定位和Flexbox或Grid布局，开发者可以创建出灵活多样的网页结构。 【JavaScript】 JavaScript是一种强大的客户端脚本...
总的来说，使用原生JS和CSS实现分页虽然相比使用预封装的库更繁琐，但能提供更高的定制性，并有助于提升开发者对Web基础技术的理解。通过结合HTML布局、CSS样式和JavaScript逻辑，我们可以构建出符合项目需求的高效...
"24种简单的div+css分页代码特效.zip"是一个压缩包，其中包含了24个不同的示例，展示了如何使用HTML的`<div>`元素和CSS样式来实现分页效果。这些特效可能涵盖了各种样式和交互设计，旨在提高用户体验和网站的美观性...
5. **JavaScript和AJAX**：除了HTML和CSS，后台管理模板可能还包含JavaScript代码，用于实现动态交互效果和AJAX异步通信，提供更好的用户体验，如表格分页、数据筛选、表单验证等功能。 6. **其他资源**：模板可能...
对于复杂的表格，如带有排序、筛选和分页功能的数据展示，使用DIV+CSS的方式也能更好地与JavaScript库（如jQuery DataTables）结合，实现更丰富的交互性。 在提供的`test.html` 文件中，可能包含了这样一个示例，...
在分页场景中，HTML元素如`<div>`、`<ul>`、`<li>`和`<a>`将用于创建分页的布局。例如，`<a>`标签通常用作可点击的链接，表示不同的页码。 2. **jQuery**：jQuery是一个强大的JavaScript库，简化了DOM操作、事件...