SELECT2和BootStrap Table的简单搜索分页表
郭胤
SELECT2和BootStrap Table的简单搜索分页表
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:include="common/header1.0 :: header('客户维护数据导出')"></head>
<!-- select2 -->
<link th:href="@{select2/css/select2.min.css}" rel="stylesheet"
type="text/css">
<!-- BootStrap相关 -->
<link th:href="@{bootstrap-3.3.7-dist/css/bootstrap.min.css}"
rel="stylesheet" type="text/css">
<link th:href="@{bootstrap-3.3.7-dist/css/bootstrap-theme.min.css}"
rel="stylesheet" type="text/css">
<!-- Bootstrap table -->
<link th:href="@{bootstrap-3.3.7-dist/css/bootstrap-table.min.css}"
rel="stylesheet" type="text/css">
<style>
.table_adjust th {
padding: 9px 10px;
text-aligin: center
}
</style>
<body>
<nav class="breadcrumb">
<i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span>
数据导出管理 <span class="c-gray en">></span>客户维护数据导出 <a
class="btn btn-success radius r"
style="line-height: 1.6em; margin-top: 3px"
href="javascript:location.replace(location.href);" title="刷新"> <i
class="Hui-iconfont"></i>
</a>
</nav>
<div class="page-container">
<div class="text-c">
<span>维护人名称:</span> <select id="maintainerName" class="select2"></select>
<button class="btn btn-success radius" id="searchMaintainer"
onclick="searchMaintainer()">
<i class="Hui-iconfont"></i> 搜索
</button>
<!-- <button class="btn btn-success radius" onclick="exportCurrentData()">导出当前数据</button> -->
</div>
</div>
<div class="mt-20">
<table id="maintainenanceStudentList">
</table>
</div>
<!-- 公共JS -->
<div th:replace="common/js1.0 :: commonJs"></div>
<div th:replace="common/js1.0 :: commonTools"></div>
<script type="text/javascript"
th:src="@{yckd/lib/My97DatePicker/4.8/WdatePicker.js}"></script>
<script type="text/javascript"
th:src="@{yckd/lib/datatables/1.10.0/jquery.dataTables.min.js}"></script>
<script type="text/javascript"
th:src="@{yckd/lib/laypage/1.2/laypage.js}"></script>
<!-- select2 -->
<script type="text/javascript"
th:src="@{select2/js/select2.full.min.js}"></script>
<script type="text/javascript" th:src="@{select2/js/i18n/zh-CN.js}"></script>
<!-- BootstrapTable -->
<script type="text/javascript"
th:src="@{bootstrap-3.3.7-dist/js/bootstrap-table.min.js}"></script>
<script type="text/javascript"
th:src="@{bootstrap-3.3.7-dist/js/bootstrap-table-zh-CN.min.js}"></script>
<script type="text/javascript">
$(function() {
$("#maintainerName").select2(
{
width : "200px",
ajax : {
type : "GET",
url : "/getMaintainerName",
dataType : 'json',
delay : 250,
data : function(params) {
return {
param : params.term, // search term 请求参数 ， 请求框中输入的参数
page : params.page
};
},
processResults : function(data, params) {
var newData = [];
for (var i = 0; i < data.data.length; i++) {
newData.push({
id : data.data[i].id,
text : data.data[i].trueName + "-"
+ data.data[i].phoneNumber,
})
}
;
return {
results : newData
};//结果
},
cache : true
},
placeholder : '请选择',//默认文字提示
language : "zh-CN",
tags : false,//允许手动添加
allowClear : true,//允许清空
escapeMarkup : function(markup) {
return markup;
}, // 自定义格式化防止xss注入
minimumInputLength : 1,//最少输入多少个字符后开始查询
formatResult : function formatRepo(repo) {
console.log(repo);
return repo.text;
}, // 函数用来渲染结果
formatSelection : function formatRepoSelection(repo) {
console.log(repo);
return repo.text;
} // 函数用于呈现当前的选择
})
});
var $maintainenanceStudentList = $("#maintainenanceStudentList");
$maintainenanceStudentList.bootstrapTable({
columns : [ {
field : 'studentName',
align : 'center',
title : '学员姓名'
}, {
field : 'surplusLessonTimes',
align : 'center',
title : '剩余课时'
}, {
field : "guarderPhoneNumber",
align : 'center',
title : '监护人电话'
}, {
field : 'groundName',
align : 'center',
title : '所在场馆'
}, {
field : 'maintainerName',
align : 'center',
title : '维护人姓名'
} ]
});
function searchMaintainer() {
maintainerId = $("#maintainerName").select2("val");
if(maintainerId==undefined){
maintainerId="";
}
$maintainenanceStudentList.bootstrapTable('destroy')
.bootstrapTable({
url : '/getCustomerMaintenanceData', //请求后台的URL（*）
method : 'GET', //请求方式（*）
//toolbar: '#toolbar', //工具按钮用哪个容器
striped : true, //是否显示行间隔色
cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination : true, //是否显示分页（*）
sortable : false, //是否启用排序
sortOrder : "asc", //排序方式
//queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber : 1, //初始化加载第一页，默认第一页
pageSize : 10, //每页的记录行数（*）
pageList : [ 10, 25, 50, 100 ], //可供选择的每页的行数（*）
search : true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch : true,
showColumns : true, //是否显示所有的列
showRefresh : true, //是否显示刷新按钮
minimumCountColumns : 2, //最少允许的列数
clickToSelect : true, //是否启用点击选中行
//height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId : "ID", //每一行的唯一标识，一般为主键列
showToggle : true, //是否显示详细视图和列表视图的切换按钮
cardView : false, //是否显示详细视图
detailView : false, //是否显示父子表
queryParams : function(params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的
return {//这里的params是table提供的
offset : params.offset,//从数据库第几条记录开始
pageSize : params.limit,//找多少条
maintainerId : maintainerId
}
},
columns : [ {
field : 'studentName',
align : 'center',
title : '学员姓名'
}, {
field : 'surplusLessonTimes',
align : 'center',
title : '剩余课时'
}, {
field : "guarderPhoneNumber",
align : 'center',
title : '监护人电话'
}, {
field : 'groundName',
align : 'center',
title : '所在场馆'
}, {
field : 'maintainerName',
align : 'center',
title : '维护人姓名'
} ]
})
}
/* function exportCurrentData() {
console.log("0")
} */
</script>
</body>
</html>
@RequestMapping("/getCustomerMaintenanceData")
public @ResponseBody Map<String, Object> getCustomerMaintenanceData(TableDataBean tableDataBean){
Map<String,Object> result = new HashMap<>();
List<Map<Object, Object>> datas = userService.handleGetCustomerMaintenanceData(tableDataBean);
tableDataBean.setSearchSize("true");//mybatis中sql语句的<if>判断值，查询总条数。
List<Map<Object, Object>> data2 = userService.handleGetCustomerMaintenanceData(tableDataBean);
result.put("total", data2.size());
result.put("rows", datas);
return result;
}
@Select("<script>SELECT t1.id,t1.trueName AS studentName, t1.surplusLessonTimes, t1.guarderPhoneNumber, t3.groundName , t4.trueName AS maintainerName FROM `u_user` t1 LEFT JOIN common_db.r_user_ground t2 ON t1.id = t2.userId LEFT JOIN common_db.meta_ground t3 ON t2.groundId = t3.groundId LEFT JOIN common_db.u_user t4 ON t1.maintainerId = t4.id WHERE <choose><when test='maintainerId!=null and maintainerId!=\"\"'>t1.maintainerId = #{maintainerId}</when><otherwise>t1.role=4</otherwise></choose>ORDER BY t1.id desc<if test='searchSize==null or searchSize ==\"\"'>limit #{offset},#{pageSize}</if></script>")
public List<Map<Object, Object>> getCustomerMaintenanceData(TableDataBean tableDataBean);
类似资料：