2021年5月10日：
今天大致上做了成员列表的完善，具体体现为当成员数大于20时会自动显示分页，并且在页面上显示出成员的头像和真实姓名，并且当到达最后一页时，会自动隐藏下一页按钮，当第一页时会自动隐藏上一页按钮，具体的代码如下所示：
<div class="col-md-9 col-sm-9 col-xs-12">
<div class="" role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
<li role="presentation" class="active"><a
href="#tab_content1" id="home-tab" role="tab" data-toggle="tab"
aria-expanded="true">成员列表</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade active in"
id="tab_content1" aria-labelledby="home-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>
</div>
</div>
</div>
这是选项卡的代码，该代码就是通过ajax请求将数据发送到ul中，ajax请求的代码：
$(function() {
$("#prev").attr("style","visibility:hidden");
$.ajax({
url : "${pageContext.request.contextPath}/user/page",
data : "page=1&id="+${club.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","javaScript:;");
var img=$("<img>").attr("src","${pageContext.request.contextPath}/statics/images/user/"+this.head_img);
if(this.user_type==2){
$("#ul").append(li.append(a.append(img).append(this.true_name+"(社长)")));
}else
{
$("#ul").append(li.append(a.append(img).append(this.true_name)));
}
})
}
})
})
该代码的意思在于，在页面加载完成之后通过发送ajax请求获得到数据之后，通过传送页码也就是第一页以及社团的Id然后将动态生成的li加到ul中，当然，这只是第一页的代码，上一页的按钮和下一页的按钮我还没做，不过大致原理上和第一页其实差不多，只不过还要考虑其他各种的因素才能完善，总的来说，今天就只是完成了个大概，还有很多细节没有完善呢。