SELECT2和BootStrap Table的简单搜索分页表

最新推荐文章于 2021-03-21 03:30:34 发布

明天依旧下着大雨

最新推荐文章于 2021-03-21 03:30:34 发布

阅读量1.6k

点赞数

分类专栏： HTML前端

本文链接：https://blog.csdn.net/u012764444/article/details/83616345

版权

HTML前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span>
		数据导出管理 <span class="c-gray en">&gt;</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">&#xe68f;</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">&#xe665;</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);

明天依旧下着大雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SELECT2和BootStrap Table的简单搜索分页表

SELECT2和BootStrap Table的简单搜索分页表&lt;!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd"&gt;&lt;html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http:...
复制链接

扫一扫

专栏目录