您的位置:首页 > Web前端 > JavaScript

JSP中如何自己写分页

2016-05-24 16:51 411 查看
1、普通的分页查询

<div class="paging">
//上一页
<c:if test="${pageDto.pageNo != 1}"><span onclick="gotoPage('<c:out value='${pageDto.pageNo-1}'/>');">上一页</span></c:if>
//第一页
<span <c:if test="${pageDto.pageNo == 1}">class="cur"</c:if> <c:if test="${pageDto.pageNo != 1}">onclick="gotoPage('1');"</c:if>>1</span>
//当前页距离第一页相差2页以上,显示...
<c:if test="${pageDto.pageNo-1>2}"><span class="ellipsis">...</span></c:if>
//前一页、当前页、后一页的显示(只有总页数大于等于3页时,才有这个逻辑)
<c:if test="${pageDto.totalPages-1-2>=0}">
<c:forEach var="page" begin="2" end="${pageDto.totalPages-1}" varStatus="status">
<c:choose>
//前一页
<c:when test="${(pageDto.pageNo-status.index)==1}">
<span onclick="gotoPage('<c:out value='${status.index}'/>');"><c:out value='${status.index}'/></span>
</c:when>
//当前页
<c:when test="${(pageDto.pageNo-status.index)==0}">
<span class="cur"><c:out value='${status.index}'/></span>
</c:when>
//后一页
<c:when test="${(pageDto.pageNo-status.index)==-1}">
<span onclick="gotoPage('<c:out value='${status.index}'/>');"><c:out value='${status.index}'/></span>
</c:when>
</c:choose>
</c:forEach>
</c:if>
//当前页距离最后一页相差2页以上,显示...
<c:if test="${pageDto.totalPages-pageDto.pageNo>2}"><span class="ellipsis">...</span></c:if>
//最后一页
<c:if test="${pageDto.totalPages>1}"><span <c:if test="${pageDto.pageNo == pageDto.totalPages}">class="cur"</c:if> <c:if test="${pageDto.pageNo != pageDto.totalPages}">onclick="gotoPage('<c:out value='${pageDto.totalPages}'/>');"</c:if>><c:out value='${pageDto.totalPages}'/></span></c:if>
//下一页
<c:if test="${pageDto.pageNo != pageDto.totalPages}"><span onclick="gotoPage('<c:out value='${pageDto.pageNo+1}'/>');">下一页</span></c:if>
</div>

2、ajax分页展示

// 分页
var pageNo = parseInt(data["limitStart"])/15 + 1;
var totalPages = Math.ceil(parseInt(data["totalCount"])/15);
var $scPageStr = "";
if(totalPages==0){
totalPages=pageNo;
}
$scPageStr += '<div class="paging">';
//上一页
if(pageNo!=1){
$scPageStr += ' <span onclick="ajaxQryScProduct('+(pageNo-1)+', this);">上一页</span>';
}
//第一页
if(pageNo == 1){
$scPageStr += '<span class="cur" onclick="ajaxQryScProduct('+ 1 +', this);">1</span>';
} else {
$scPageStr += '<span onclick="ajaxQryScProduct('+ 1 +', this);">1</span>';
}
//当前页距离第一页相差2页以上,显示...
if(pageNo-1>2){
$scPageStr += '<span class="ellipsis">...</span>';
}
//前一页、当前页、后一页的显示(只有总页数大于等于3页时,才有这个逻辑)
if(totalPages-3>=0){
for(var i=2; i<totalPages; i++){
if(pageNo-i==1){ //前一页
$scPageStr += '<span onclick="ajaxQryScProduct('+ i +', this);">'+i+'</span>';
}else if(pageNo==i){ //当前页
$scPageStr += '<span class="cur" onclick="ajaxQryScProduct('+ i +', this);">'+i+'</span>';
}else if(i-pageNo==1){ //后一页
$scPageStr += '<span onclick="ajaxQryScProduct('+ i +', this);">'+i+'</span>';
}
}
}
//当前页距离最后一页相差2页以上,显示...
if(totalPages-pageNo>2){
$scPageStr +='<span class="ellipsis">...</span>';
}
//最后一页
if(totalPages>1){
if(pageNo==totalPages){
$scPageStr += '<span class="cur" onclick="ajaxQryScProduct('+ totalPages +', this);">'+totalPages+'</span>';
}else {
$scPageStr += '<span onclick="ajaxQryScProduct('+ totalPages +', this);">'+totalPages+'</span>';
}
}
//下一页
if(pageNo!=totalPages){
$scPageStr +='<span onclick="ajaxQryScProduct('+(pageNo+1)+', this);">下一页</span>';
}
$scPageStr +='<span style="border:none;">跳转到<input type="text" id="scPageJump" class="input-page-jump" totalPages="'+totalPages+'" />页<input type="button" class="input-page-jump-button" value="确定" onclick="scPageJump();"/></span>';
$scPageStr += '</div>';
$("#id_scPage").html($scPageStr);
$("#id_scPage").removeClass("hide");
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: