测试程序
分页功能说明:
回顾【util】包下 Page 工具类:
public class Page {
int start; // 开始数据
int count; // 每一页的数量
int total; // 总共的数据量
public Page(int start, int count){
super();
this.start = start;
this.count = count;
}
public boolean isHasPreviouse(){
if(start == 0){
return false;
}
return true;
}
public boolean isHasNext(){
if(start == getLast()){
return false;
}
return true;
}
public int getTotalPage(){
int totalPage;
//假设总数50,是能够被5整除的,那么就有10页
if(0 == total % count){
totalPage = total / count;
}else{
//假设总数51,不能被5整除的,那么就有11页
totalPage = total / count + 1;
}
if(0 == totalPage){
totalPage = 1;
}
return totalPage;
}
public int getLast(){
int last;
//假设总数是50,能够被5整除的,那么最后一页的开始就是40
if(0 == total % count){
last = total - count;
}else{
//假设总数是51,不能够被5整除的,那么最后一个的开始就是50
last = total - total % count;
}
last = last < 0 ? 0:last;
return last;
}
//getter和setter
}
- totalPage 是计算得来的数,用来表示页码一共的数量
在首页显示的 StudentList 用 page 的参数来获取:
List<Student> students = studentService.list(page.getStart(), page.getCount());
并且在映射文件中用 LIMIT 关键字:
<!-- 查询从start位置开始的count条数据-->
<select id="list" resultMap="student">
SELECT * FROM student ORDER BY student_id desc limit #{param1}, #{param2}
</select>
第一个参数为 start,第二个参数为 count
这样就能根据分页的信息来获取到响应的数据
编写分页栏:
1.写好头和尾
<nav style="text-align: center">
<ul class="pagination">
....
</ul>
</nav>
2.写好
«
‹
这两个功能按钮
使用 <c:if>
标签来增加边界判断,如果没有前面的页码了则设置为disable状态
<li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
<a href="?page.start=0">
<span>«</span>
</a>
</li>
<li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
<a href="?page.start=${page.start-page.count}">
<span>‹</span>
</a>
</li>
再通过 JavaScrip 代码来完成禁用功能:
<script>
$(function () {
$("ul.pagination li.disabled a").click(function () {
return false;
});
});
</script>
3.完成中间页码的编写
从 0
循环到 page.totalPage - 1
,varStatus
相当于是循环变量
- status.count 是从1开始遍历
- status.index 是从0开始遍历
- 要求:显示当前页码的前两个和后两个就可,例如当前页码为3的时候,就显示 1 2 3(当前页) 4 5 的页码
- 理解测试条件:
-10 <= 当前页*每一页显示的数目 - 当前页开始的数据编号 <= 30
- 只要理解了这个判断条件,其他的就都好理解了
<c:forEach begin="0" end="${page.totalPage-1}" varStatus="status">
<c:if test="${status.count*page.count-page.start<=30 && status.count*page.count-page.start>=-10}">
<li <c:if test="${status.index*page.count==page.start}">class="disabled"</c:if>>
<a
href="?page.start=${status.index*page.count}"
<c:if test="${status.index*page.count==page.start}">class="current"</c:if>
>${status.count}</a>
</li>
</c:if>
</c:forEach>
4.在控制器中获取参数
// 获取分页参数
int start = 0;
int count = 10;
try {
start = Integer.parseInt(request.getParameter("page.start"));
// count = Integer.parseInt(request.getParameter("page.count"));
} catch (Exception e) {
}
....
// 共享 page 数据
request.setAttribute("page", page);
Date 转换的问题
假设,我们看到页面上显示的日期是这样的格式:
这显然是我们不希望看到的
- 解决方案:在映射文件中设置日期显示的类型。
重新部署文件,然后刷新页面,就能看到我们希望的效果啦:
增加删除提示
第一个想到的就是删除提示,没有删除提示是很要命的一件事情,如果手滑了一下那可能就悲剧了....
首先我们在顶部的 <head>
标签中的 <script>
中增加一段代码:
function del() {
var msg = "您真的确定要删除吗?\n\n请确认!";
if (confirm(msg) == true) {
return true;
} else {
return false;
}
}
然后在删除 a 标签页中增加 onclick 属性:
<td><a href="/deleteStudent?id=${s.id}" οnclick="javascript:return del();"><span class="glyphicon glyphicon-trash"></span> </a></td>
当我们刷新页面后,点击删除就会弹出提示信息:
编辑页面自动勾选上性别
假设点击编辑按钮进入到编辑页面后,性别这个选项是空选的状态,这样很不友善
解决办法:在 editStudent 页面增加一些判断就好了:
<tr>
<td>性别:</td>
<td>
<input type="radio" <c:if test="${student.sex == '男'}">checked</c:if> class="radio radio-inline" name="sex" value="男">男
<input type="radio" <c:if test="${student.sex == '女'}">checked</c:if> class="radio radio-inline" name="sex" value="女">女
</td>
</tr>
空值判断
我们允许设置为 null 的值仅仅为出生日期,其他的值均不允许出现空值,所以我们需要加入空值判断:
<script>
function checkEmpty(id, name) {
var value = $("#" + id).val();
if(value.length == 0){
alert(name + "不能为空");
$("#" + id).focus();
return false;
}
return true;
}
$(function () {
$("ul.pagination li.disabled a").click(function () {
return false;
});
$("#addForm").submit(function () {
if(!checkEmpty("student_id", "学号")){
return false;
}
if(!checkEmpty("name", "姓名")){
return false;
}
if(!checkEmpty("age", "年龄")){
return false;
}
return true;
});
});
</script>
然后再为 form 创建一个 id 属性值为 “addForm” 并添加进判断空值的方法:
<form id="addForm" method="post" action="/addStudent" role="form">
......
</form>
- 注意: 这里需要写在 $(function(){}) 里面,等待文档加载完毕才能生效。
- 这里并没有为 sex 属性判断空值,我们采用一个简单的为 sex 添加一个默认勾选项来省略空值的判断。