个人博客

2021年5月30日：

今天我打算把确认人数给显示在模态框上，如图所示：

 这一段的前端代码如下：

<script type="text/javascript">
Date.prototype.toLocaleString = function() {
return this.getFullYear() + "年" + (this.getMonth() + 1) + "月" + this.getDate()+"日";
};
var page;
var l;
var pa;
var c;
var h;
var users;
$(function(){
$(".huodong1").click(function(){
page=1;
l=1;
$.ajax({
url : "${pageContext.request.contextPath}/club/qiandao",
data : "club="+$(this).attr("data-club"),
success : function(data) {
$("#mu").text(data.map.ren);
}
})
$.ajax({
url : "${pageContext.request.contextPath}/user/qiandao1",
data : "club="+$(this).attr("data-club")+"&huo1="+$(this).attr("data-huo"),
async: false,
success : function(data) {
users=data.length;
$("#zi").text(data.length);
}
})
$("#u").empty();
if(users>l){
$("#fenye").empty();
var li=`<li class="active" id="shang"><a href="" data-toggle="tab"
onclick="shangye()">上一页</a></li>
<li style="margin-left: 10px;" id="xia"><a href=""
data-toggle="tab" onclick="xiaye()">下一页</a></li>`;
$("#fenye").append(li);
$("#shang").attr("style","visibility:hidden");
$("#fenye").show();
}
c=$(this).attr("data-club");
h=$(this).attr("data-huo");
$.ajax({
url : "${pageContext.request.contextPath}/user/qiandao",
data : "p=1&club="+$(this).attr("data-club")+"&huo1="+$(this).attr("data-huo"),
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.user+".jpg");
$("#u").append(li.append(a.append(img).append(this.user)));
})
}
})
$("#mh").modal({
backdrop : "static"
})
})
})
function shangye() {
$("#xia").attr("style","visibility:visible");
page--;
if(page==1){
$("#shang").attr("style","visibility:hidden");
}
$.ajax({
url : "${pageContext.request.contextPath}/user/qiandao",
data : "p=" + page+"&club="+c+"&huo1="+h,
type : "get",
success : function(data) {
l-=pa;
pa=data.length;
$("#u").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","javaScript:;");
var img=$("<img>").attr("src","${pageContext.request.contextPath}/statics/images/user/"+this.user+".jpg");
$("#u").append(li.append(a.append(img).append(this.user)));
})
}
})
}
function xiaye() {
page++;
$("#shang").attr("style","visibility:visible");
$.ajax({
url : "${pageContext.request.contextPath}/user/qiandao",
data : "p=" + page+"&club="+c+"&huo1="+h,
type : "get",
success : function(data) {
pa=data.length;
l+=data.length;
if(l==users){
$("#xia").attr("style","visibility:hidden");
}
$("#u").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","javaScript:;");
var img=$("<img>").attr("src","${pageContext.request.contextPath}/statics/images/user/"+this.user+".jpg");
$("#u").append(li.append(a.append(img).append(this.user)));
})
}
})
}
</script>

显示签到人数的页面基本上是照着之前的团员列表做的，其原理依旧是如果签到的人数大于一页中最多显示的人数那么就开启分页，并且按钮也跟之前的一样，也有上一页和下一页，并且将数据库中签到的人数直观地显示在分子的位置上，将社团的总人数显示在分母上，这样一来就能直观的展示哪些人没有收到确认了。