2021年5月13日：
这是社团的分页页面：
这有两个选项卡，一个是社长独有的创建社团，另一个就是加入的社团，每个社长最多创建5个社团，当小于5个时就会显示创建社团的按钮，然后创建一个社团，并且只有特定的人才能创建社团，只有学校指定的人在最初修改自己信息资料时才能指定自己的类型是社长，社长有发起活动，创建活动，给团员发送信息的功能。
主页代码：
<%@ 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; 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; 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; 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>
其中js代码就是社团分页的代码，起原理跟上一个成员分页的代码差不多。