经常用到的一种情况:在分页显示查询结果数据时候,当到达首页时候使得首页button和上一页button不可用,到达尾页时候下一页和尾页不可用。
第一种代码实现(失败):
Jsp:
<input type="button" value="首页" id="firstPage" οnclick="goFirst()" />
<input type="button" value="上一页" id="previousPage" οnclick="goPrevious()"/>
<input type="button" value="下一页" id="nextPage" οnclick="goNext()"/>
<input type="button" value="尾页" id="lastPage" οnclick="goLast()" />
Javascript:
function goFirst() {
window.self.location = "../servlet/user_info?pageNo=${userPageModel.firstPage}";
}
function goPrevious() {
window.self.location = "../servlet/user_info?pageNo=${userPageModel.previousPage}";
}
function goNext() {
window.self.location = "../servlet/user_info?pageNo=${userPageModel.nextPage}";
}
function goLast() {
window.self.location = "../servlet/user_info?pageNo=${userPageModel.lastPage}";
}
第二种代码实现(失败):
Jsp代码同上,在javascript代码中每个方法加上设置button.disabled=true;即
// previousPage是html button标签的id
document.getElementById("previousPage").disabled=true;
function goPrevious() {
window.self.location = "../servlet/user_info?pageNo=${userPageModel.previousPage}";
document.getElementById("previousPage").disabled=true;
}
第三种代码实现(成功一半,失败一半):
Jsp代码:
<input type="button" value="首页" id="firstPage" οnmοusedοwn="goFirst()" οnmοuseup="setDisabled(this)"/>
Javascript代码:
function goFirst() {
window.self.location = "../servlet/user_info?pageNo=${userPageModel.firstPage}";
}
function setDisabled(field) {
field.disabled=true;
}
成功一半失败一半的原因在于 onclick 、onmousedown、onmouseup 的区别:
click=mousedown+mouseup
鼠标按下弹起为一次click,如果只按下但是移开了不算一次click
onmouseup,有特殊情况,不管在哪里按下,只要弹起的时候在你目标区域上,就会触发。
onclick,是必须有完整的在当前区域按下,弹起。
最后采用JSTL的C标签来完成:(成功)
Jsp代码:
<c:choose>
<c:when test="${userPageModel.pageNo eq 1}" >
<input type="button" value="shouye" id="firstPage" disabled="true" />
<input type="button" value="上一页" id="previousPage" disabled="disabled"/>
</c:when>
<c:otherwise>
<input type="button" value="首页" id="firstPage" οnclick="goFirst()" /> <input type="button" value="上一页" id="previousPage" οnclick="goPrevious()"/>
</c:otherwise>
</c:choose>
<c:choose>
<c:when test="${userPageModel.pageNo eq userPageModel.lastPage }" >
<input type="button" value="下一页" id="nextPage" disabled="disabled"/>
<input type="button" value="尾页" id="lastPage" disabled="disabled" />
</c:when>
<c:otherwise>
<input type="button" value="下一页" id="nextPage" οnclick="goNext()"/>
<input type="button" value="尾页" id="lastPage" οnclick="goLast()" />
</c:otherwise>
</c:choose>
Javascript代码
同第一种情况代码,此处略。