bootstraptable 分页查询及条件查询

最新推荐文章于 2024-09-27 18:17:40 发布
原创最新推荐文章于 2024-09-27 18:17:40 发布 · 2.2k 阅读
3 ·
CC 4.0 BY-SA版权
文章标签：
#前端
bootstraptable 分页+条件查询专栏收录该内容
0 篇文章
订阅专栏
本文介绍了一个用于查询核销记录的管理系统，支持按类型、订单号等多种条件进行筛选，并提供了核销时间范围的选择功能。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<html>
<script type="text/javascript" src="<%=basePath%>script/admin/jquery-2.1.0.min.js"></script>

<link rel="stylesheet" rev="stylesheet" type="text/css" href="<%=basePath%>css/bootstrap.min.css" />
<link href="<%=basePath%>css/fonts/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="<%=basePath%>script/bootstrap.min.js"></script>

<script type="text/javascript" src="<%=basePath%>script/admin/layer/layer.js"></script>

<link rel="stylesheet" href="<%=basePath%>script/admin/bootstrap-table/bootstrap-table.css">
<script src="<%=basePath%>script/admin/bootstrap-table/bootstrap-table.js"></script>
<script src="<%=basePath%>script/admin/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript" src="<%=basePath %>My97DatePicker/WdatePicker.js"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
	<div class="main_right_content">
		<div class="default_right_title" style="background-color: #ededed; padding: 15px;">
			<h3 style="margin: 0;">核销记录查询</h3>
		</div>
	</div>
	<div class="row" style="margin: 15px 15px 0 15px; border: 2px solid #ededed;">
		<div class="col-md-12 col-sm-12 col-xs-12" style="padding: 15px;">
			<div class="col-md-3 col-sm-3 col-xs-12 form-group">
				<div class="input-group">
					<span class="input-group-addon">类型</span>
					<select class="form-control" id="coupon_type">
						<option value="">==请选择==</option>
						<option value="coupon">电子券</option>
						<option value="tour">自由行</option>
					</select>
				</div>
			</div>
			<div class="col-md-3 col-sm-3 col-xs-12 form-group">
				<div class="input-group">
					<span class="input-group-addon">订单号</span>
					<input class="form-control" placeholder="订单号" id="order_no">
				</div>
			</div>
			<div class="col-md-3 col-sm-3 col-xs-12 form-group">
				<div class="input-group">
					<span class="input-group-addon">核销码</span>
					<input class="form-control" placeholder="核销码" id="coupon_no">
				</div>
			</div>
			<div class="col-md-3 col-sm-3 col-xs-12 form-group">
				<div class="input-group">
					<span class="input-group-addon">会员卡号</span>
					<input class="form-control" placeholder="会员卡号" id="card_no">
				</div>
			</div>
		</div>
	</div>
	<div class="row" style="margin: 15px 15px 0 15px; border: 2px solid #ededed;">
		<div class="col-md-6 col-sm-6 col-xs-12 form-group" style="margin-top: 15px;">
			<div class="col-md-3 col-sm-3 col-xs-12 input-group" >
					<span class="input-group-addon">核销时间</span>
					<input class="form-control" style="width:200px" placeholder="起始时间" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" readonly="readonly" id="writeoff_start">
					<span class="input-group-addon">——</span>
					<input class="form-control" placeholder="结束时间" style="width:200px"  onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" readonly="readonly" id="writeoff_end">
			</div>
			</div>
			<div class="col-md-1 col-sm-1 col-xs-1 form-group" style="margin-top: 15px;">
				<a href="javascript:;" id="search_btn" class="btn btn-success" style="text-decoration: none;">搜索</a>
			</div>
			<div class="col-md-1 col-sm-1 col-xs-1 form-group" style="margin-top: 15px;">
				<a href="javascript:;" id="clear_btn" class="btn btn-info" style="text-decoration: none;">重置</a>
			</div>
	</div>
	<div class="row" style="margin: 15px;">
		<div class="col-md-13 col-sm-13 col-xs-13">
			<table id="writeoffTable"></table>
		</div>
	</div>
	<div class="modal" id="myModal" tabindex="-1">
		<div class="modal-dialog" style="width: 80%">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel"></h4>
				</div>
				<div class="modal-body"></div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
Javascript: parent.window.scrollTo(0, 0);
$(function () {
	TableObj.oTableInit();
});

var TableObj = {
		//初始化Table
		oTableInit: function () {
			 $('#writeoffTable').bootstrapTable({
					url : 'admin/shopCouponSaleHistoryPage_ShopCouponSaleHistory.htm',
					queryParams : function(params) {
						var param = {
							offset : params.offset,
							limit : params.limit,
							couponType : $.trim($("#coupon_type").val()),
							orderNo : $.trim($("#order_no").val()),
							couponNo : $.trim($("#coupon_no").val()),
							cardNo : $.trim($("#card_no").val()),
							writeoffStart:$.trim($("#writeoff_start").val()),
							writeoffEnd:$.trim($("#writeoff_end").val())
						};
						return param;
					},
					columns : [ {
						field : 'id',
						title : '核销记录ID',
						align : 'center',
						halign : 'center',
						valign : 'middle',
						visible : false
					}, {
						field : 'couponType',
						title : '类型',
						align : 'center',
						halign : 'center',
						valign : 'middle',
						sortable : false,
						formatter : function(value, row, index) {
							if ( value=='coupon') {
								return "电子券";
							} else if(value=='tour') {
								return "自由行";
							}
						}
					}, {
						field : 'goodsName',
						title : '名称',
						align : 'center',
						halign : 'center',
						valign : 'middle',
						sortable : false,
						formatter : function(value, row, index) {
							if ( undefined==value || null == value  || value.length == 0) {
								return row['couponCode'];
							} else {
								return value;
							}
						}
					}, {
						field : 'orderNo',
						title : '订单号',
						align : 'center',
						halign : 'center',
						valign : 'middle',
						sortable : false
					}, {
						field : 'cardNo',
						title : '会员卡号',
						align : 'center',
						halign : 'center',
						valign : 'middle',
						sortable : false,
						formatter : function(value, row, index) {
							if (undefined==value || null == value  || value.length == 0) {
								return '---';
							} else {
								return value;
							}
						}
					}, {
						field : 'couponNo',
						title : '核销码',
						align : 'center',
						halign : 'center',
						valign : 'middle',
						sortable : false
					}, {
						field : 'writeoffTime',
						title : '核销时间',
						align : 'center',
						halign : 'center',
						valign : 'middle',
						sortable : false,
						formatter : function(value, row, index) {
							if (value && value.time) {
								var date = new Date(value.time);
								return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
							} else {
								return '---';
							}
						}
					}],
					idField : 'id',
					pagination : true,
					paginationPreText : '上一页',
					paginationNextText : '下一页',
					sidePagination : 'server',
					cache : false,// 不开启缓存
					undefinedText : '---',// 当数据为 undefined 时显示的字符
					paginationLoop : true,// 分页条无限循环的功能
					sortable : false,
					showColumns : true
					//sortOrder : "desc"
				});
		}
	};

	// 搜索
	$('#search_btn').on('click', function() {
		var writeoff_start=$('#writeoff_start').val();
		var writeoff_end=$('#writeoff_end').val();
		if(writeoff_start > writeoff_end){
			layer.alert("起始时间不可以大于结束时间！");
			return false;	
		}
		$('#writeoffTable').bootstrapTable('destroy');
		TableObj.oTableInit();
	});
	// 重置
	$('#clear_btn').on('click', function() {
		$("input").val("");
		$("select").val("");
		$('#search_btn').click();
	});
</script>
</html>