5.13-jsp分页功能实现

1、分页共能的实现

可以在dao层中创建方法 List<Member> pager(Long pageSize, Long pageNum);(方法灵活运用)
其中传入的两个参数pageSize为一页可以看多少行数据,pageNum为看第几页
而startIndex则应该为startIndex=(pageNum-1)*pageSize
————————————————
版权声明：本文为CSDN博主「会微笑的桃子」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42979840/article/details/82988702

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="/index_head.jsp">
<jsp:param name="title" value="个人主页" />
</jsp:include>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>
个人名片 <small>different form elements</small>
</h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="col-md-3 col-sm-3 col-xs-12 profile_left">
<div class="profile_img">
<div id="crop-avatar">
<img class="img-responsive avatar-view"
src="${pageContext.request.contextPath}/statics/images/<c:if test="${empty user.head_img}">img.jpg</c:if><c:if test="${not empty user.head_img}">user/${user.head_img}</c:if>"
alt="${user.nick_name}" title="${user.nick_name}">
</div>
</div>
<h3>${user.nick_name}</h3>
<ul class="list-unstyled user_data">
<li><span class="fa fa-envelope user-profile-icon"
aria-hidden="true"></span> ${user.login_mail}</li>
<li><i class="fa fa-user user-profile-icon"></i>
${user.true_name}</li>
<li><i class="fa fa-intersex user-profile-icon"></i>
${user.sex}</li>
<li><i class="fa fa-phone user-profile-icon"></i>
${user.phone}</li>
<li><i class="fa fa-credit-card "></i> ${user.id_card}</li>
<li><i class="fa fa-at user-profile-icon"></i> ${user.qq_code}</li>
<li><i class="fa fa-commenting-o user-profile-icon"></i>
${user.wechat_code}</li>
<li><i class="fa fa-tags user-profile-icon"></i>
${user.signature}</li>
</ul>
<c:if test="${empty requestScope.user}">
<a
href="${pageContext.request.contextPath}/user/edit?action=change"
class="btn btn-success"><i class="fa fa-edit m-right-xs"></i>编辑资料</a>
</c:if>
<br>
</div>
<div class="col-md-9 col-sm-9 col-xs-12">
<div role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
<c:if test="${user.user_type==2}">
<li role="presentation" class="active"><a
href="#tab_content1" id="home-tab" role="tab" data-toggle="tab"
aria-expanded="true">创建的社团</a></li>
</c:if>
<li role="presentation" class=""><a href="#tab_content2"
role="tab" id="profile-tab" data-toggle="tab"
aria-expanded="false">加入的社团</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<c:if test="${user.user_type==2}">
<div role="tabpanel" class="tab-pane fade active in"
id="tab_content1" aria-labelledby="home-tab">
<ul class="list-unstyled user_data">
<c:forEach items="${clublist}" var="club">
<li><a
href="${pageContext.request.contextPath}/club/lookclub?name=${club.name}&id=${club.id}"
class="user-profile dropdown-toggle"> <img
src="${pageContext.request.contextPath}/statics/images/club/${club.id}.jpg">
${club.name}
</a></li>
</c:forEach>
</ul>
<c:if test="${user.club_count!=5}">
<a class="btn btn-primary"
href="${pageContext.request.contextPath}/club/add">创建社团</a>
</c:if>
</div>
</c:if>
<c:if test="${user.club_count==0}">
<div role="tabpanel" class="tab-pane fade" id="tab_content2"
aria-labelledby="profile-tab">还没有加入社团，快去加入吧</div>
</c:if>
<c:if test="${user.club_count!=0}">
<div role="tabpanel" class="tab-pane fade" id="tab_content2"
aria-labelledby="profile-tab" style="height: 320px;">
<div style="height: 320px;">
<ul class="list-unstyled user_data" id="ul">
</ul>
</div>
<ul class="nav nav-pills"
style="margin-left: 720px; display: none;" id="page">
<li class="active" id="prev"><a href="" data-toggle="tab"
onclick="prev()">上一页</a></li>
<li style="margin-left: 10px;" id="next"><a href=""
data-toggle="tab" onclick="next()">下一页</a></li>
</ul>
</div>
</c:if>
</div>
</div>
</div>
</div>
</div>
</div>
<jsp:include page="/index_foot.jsp"></jsp:include>
<script type="text/javascript">
var page=1;
var l=1;
var pa;
$(function() {
$("#prev").attr("style","visibility:hidden");
$.ajax({
url : "${pageContext.request.contextPath}/club/page",
data : "page=1&id="+${user.id},
type : "get",
success : function(data) {
$.each(data,function(){
var li=$("<li style='float: left; margin-right: 35px; width: 140px; margin-bottom: 50px;'></li>");
var a=$("<a class='user-profile dropdown-toggle'></a>").attr("href","${pageContext.request.contextPath}/club/lookclub?name="+this.name+"&id="+this.id);
var img=$("<img>").attr("src","${pageContext.request.contextPath}/statics/images/club/"+this.logo);
$("#ul").append(li.append(a.append(img).append(this.name)));
})
}
})
})
var clubs = ${clublist};
if(clubs.length > 1){
$("#page").show();
}
function prev() {
$("#next").attr("style","visibility:visible");
page--;
if(page==1){
$("#prev").attr("style","visibility:hidden");
}
$.ajax({
url : "${pageContext.request.contextPath}/club/page",
data : "page=" + page+"&id="+${user.id},
type : "get",
success : function(data) {
l-=pa;
pa=data.length;
$("#ul").empty();
$.each(data,function(){
var li=$("<li style='float: left; margin-right: 35px; width: 140px; margin-bottom: 50px;'></li>");
var a=$("<a class='user-profile dropdown-toggle'></a>").attr("href","${pageContext.request.contextPath}/club/lookclub?name="+this.name+"&id="+this.id);
var img=$("<img>").attr("src","${pageContext.request.contextPath}/statics/images/club/"+this.logo);
$("#ul").append(li.append(a.append(img).append(this.name)));
})
}
})
}
function next() {
page++;
$("#prev").attr("style","visibility:visible");
$.ajax({
url : "${pageContext.request.contextPath}/club/page",
data : "page=" + page+"&id="+${user.id},
type : "get",
success : function(data) {
pa=data.length;
l+=data.length;
if(l==clubs.length){
$("#next").attr("style","visibility:hidden");
}
$("#ul").empty();
$.each(data,function(){
var li=$("<li style='float: left; margin-right: 35px; width: 140px; margin-bottom: 50px;'></li>");
var a=$("<a class='user-profile dropdown-toggle'></a>").attr("href","${pageContext.request.contextPath}/club/lookclub?name="+this.name+"&id="+this.id);
var img=$("<img>").attr("src","${pageContext.request.contextPath}/statics/images/club/"+this.logo);
$("#ul").append(li.append(a.append(img).append(this.name)));
})
}
})
}
</script>