个人博客
2021年5月6日：
继续说之前的表格代码，今天发现了一个小小的bug，那就是在点击搜索的时候第一次搜索不会出来，只有点击第二次才会出现结果，目前为止还不知道为什么但还是能显示出数据来，另外，表格的日期能按照升序和降序排列，另外，在表格中的操作一栏中能对当前的社团进行操作，并且按钮有几种状态，分别是申请，已满，已加和没有按钮这几种状态，当社团未满员时并且未申请时，就显示申请按钮，当社团满员了就显示满员状态，当用户发送申请之后，当前的按钮就会不见，当然，该社团还有最基本的详情按钮。以上就是表格的大致情况，虽然界面很丑，没有那么高端但还是功能比较齐全。
<%@ 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:param name="needTable" value="true" />
</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="row">
<div class="col-md-12">
<form class="form-inline">
<div class="form-group">
<label for="clubId">社团编号</label> <input type="text"
class="form-control" id="clubId">
</div>
<div class="form-group">
<label for="clubName">社团名称</label> <input type="text"
class="form-control" id="clubName">
</div>
<div class="form-group">
<label for="clubName">社团分类</label> <select id="clubType"
class="form-control" required>
<option value="0">全部</option>
<c:forEach items="${types}" var="type">
<option value="${type.id}">${type.name}</option>
</c:forEach>
</select>
</div>
<button type="button" onclick="search()" class="btn btn-info">
<span class="glyphicon glyphicon-search" aria-hidden="true">搜索</span>
</button>
</form>
</div>
</div>
<div class="row">
<table id="table" data-toggle="table" data-pagination="true"
data-side-pagination="server" data-sort-name="id"
data-content-type="application/x-www-form-urlencoded"
data-sort-order="asc" data-method="post" data-ajax="ajaxRequest"
data-page-size="2" data-page-list="[2,3,5]"
data-url="${pageContext.request.contextPath}/club/list.json">
<thead>
<tr>
<th data-field="" data-formatter="rowNumber">序号</th>
<th data-field="id">社团id</th>
<th data-field="name" data-sortable="false">社团名称</th>
<th data-field="user_name" data-sortable="false">社长</th>
<th data-field="type_id" data-sortable="false"
data-formatter="clubtype">分类</th>
<th data-field="create_time" data-sortable="true">创建日期</th>
<th data-field="name" data-formatter="apply">操作</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<jsp:include page="/index_foot.jsp">
<jsp:param name="needTable" value="true" />
</jsp:include>
<script type="text/javascript">
function rowNumber(value, row, index) {
var options = $('#table').bootstrapTable('getOptions');
return options.pageSize * (options.pageNumber - 1) + index + 1;
}
function check(value) {
window.location.href = '${pageContext.request.contextPath}/club/lookclub?name='
+ value;
}
function apply(value, row, index) {
return '<button type="button" class="btn btn-primary" onclick="check(\''
+ value
+ '\')">详情</button>'
+ "\n"
+ '<button type="button" class="btn btn-success shenqing" data-name="'
+ value + '" onclick="apply1(\'' + value + '\',\'' + row.user_name + '\')">申请</button>';
}
$(function(){
setTimeout(function(){}, 20);
})
function apply1(value,value1) {
window.location.href = '${pageContext.request.contextPath}/club/apply1?name='+ value+"&username="+value1;
}
function clubtype(value, row, index) {
var a;
$.ajax({
url : "${pageContext.request.contextPath}/club/clubtype",
data : "typeid=" + value,
type : "get",
dataType : "text",
async : false,
success : function(data) {
a = data;
}
})
return a;
}
function ajaxRequest(params) {
var club = {};
club.id = $("#clubId").val().trim();
club.name = $("#clubName").val().trim();
if ($("#clubType").val() > 0) {
club.type_id = $("#clubType").val();
}
params.data.obj = club;
$.ajax({
url : params.url,
data : JSON.stringify(params.data),
type : "POST",
contentType : "application/json",
dataType : "json",
success : function(data) {
params.success(data);
$.each($(".shenqing"), function(i,a) {
$.each(data.rows,function(i,v){
if(v.name==$(a).attr("data-name")){
if(v.renshu==v.peoplecount){
$(a).text("社团已满").attr("disabled",true).removeClass("btn-success").addClass("btn-secondary");
}
$.each(${applylist},function(){
if(this.club_name==$(a).attr("data-name")){
if(this.status==0){
if(v.renshu==v.peoplecount){
$(a).text("社团已满").attr("disabled",true).removeClass("btn-success").addClass("btn-secondary");
}
else
{
$(a).remove();
}
}
if(this.status==2){
$(a).text("已加").attr("disabled",true).removeClass("btn-success").addClass("btn-secondary");
}
}
})
}
})
})
}
})
}
function search() {
$("#table").bootstrapTable('refresh');
}
</script>
这是完善了的完整页面代码。其中包括index_head和index_foot两个页面。
