dataTable的调用查询

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8" />
<title>${systemInfoName} | 产品管理</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<jsp:include page="../common/include/admin_first_include.jsp" flush="true">
	<jsp:param name="pathPrefix" value="../" />
</jsp:include>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL STYLES -->
<link rel="stylesheet" type="text/css" href="../resources/css/select2_metro.css" />
<link rel="stylesheet" href="../resources/css/DT_bootstrap.css" />
<!-- END PAGE LEVEL STYLES -->
<link rel="shortcut icon" href="../resources/image/favicon.ico" />
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="page-header-fixed page-sidebar-fixed">
	<!-- BEGIN HEADER -->
	<jsp:include page="../common/admin_top_bar.jsp" flush="true">
		<jsp:param name="pathPrefix" value="../" />
	</jsp:include>
	<!-- END HEADER -->
	<!-- BEGIN CONTAINER -->
	<div class="page-container row-fluid">
		<!-- BEGIN SIDEBAR -->
		<jsp:include page="../common/admin_left_menu.jsp" flush="true">
			<jsp:param name="selectMenu" value="BabyLogMenu-Product" />
		</jsp:include>
		<!-- END SIDEBAR -->
		<!-- BEGIN PAGE -->
		<div class="page-content">
			<!-- BEGIN PAGE CONTAINER-->
			<div class="container-fluid">
				<!-- BEGIN PAGE HEADER-->
				<div class="row-fluid">
					<div class="span12">
						<!-- BEGIN PAGE TITLE & BREADCRUMB-->
						<h3 class="page-title">
							产品管理 <small>文章数据维护</small>
						</h3>
						<ul class="breadcrumb">
							<li><i class="icon-home"></i> <a href="javascript:void(0);">主页</a> <i class="icon-angle-right"></i>
							</li>
							<li><a href="javascript:void(0);">基础管理</a> <i class="icon-angle-right"></i>
							</li>
							<li><a href="list">产品管理</a></li>
						</ul>
						<!-- END PAGE TITLE & BREADCRUMB-->
					</div>
				</div>
							<!-- END PAGE HEADER-->
				<!-- BEGIN PAGE CONTENT-->
				<div class="row-fluid">
					<div class="span12">
						<!-- BEGIN EXAMPLE TABLE PORTLET-->
						<div class="portlet box light-grey">
							<div class="portlet-title">
								<div class="caption">
									<i class="icon-globe"></i>数据列表
								</div>
								
							</div>
							<div class="portlet-body">
								<div class="clearfix">
									<div class="btn-group">
									<div class="actions">
									<div class="btn-group">
										<table>
											<tr>
												<td><label>品牌:</label></td><td><input type="text" id="brand" value="${brand}"/></td>
												<td><label>系列:</label></td><td><input type="text" id="catena" value="${catena}"/></td>
												<td><label>型号:</label></td><td><input type="text" id="model" value="${model}"/></td>
												<td></td>
												<td>
													<button id="sample_editable_1_new" class="btn green" onClick="javascript:clickme();">
														查询 
													</button>
												</td>
											</tr>
											<tr>
												<td><label>修改调价率:</label></td><td><input type="text" id="adjustPrice" value=""  class="m-wrap medium" /></td>
												<td>
													<button id="sample_editable_1_new" class="btn green" onClick="javascript:updateAdjPrice();">
														修改
													</button>
												</td>
											</tr>
										</table>
									
									</div>
									</div>
										<button id="sample_editable_1_new" class="btn green" onClick="javascript:linkAdd();">
											新增 <i class="icon-plus"></i>
										</button>
										<button class="btn green" onClick="javascript:linkDeleteids();">
											删除多项
										</button>
									</div>
								</div>
								
								<table id="datatable"class="table table-striped table-bordered table-hover" >  
									<thead>  
								 		<tr>  
								 			<th style="width:8px;"><input id="checkAll" type="checkbox" class="group-checkable" data-set="#datatable.checkboxes" /></th>
								 			<th>品牌</th> 
								 			<th>系列</th> 
								 			<th>型号</th> 
								 			<th>规格</th>
								 			<th>价格</th>
								 			<th>调价率%</th>
								  			<th>创建时间</th>  
								  			<th>操作</th>  
								 		</tr>  
									</thead>
									  
									<tbody>  
									</tbody>  
								</table>
							</div>
						</div>
						<!-- END EXAMPLE TABLE PORTLET-->
					</div>
				</div>
				<!-- END PAGE CONTENT-->
			</div>
			<!-- END PAGE CONTAINER-->
		</div>
		<!-- END PAGE -->
	</div>
	<!-- END CONTAINER -->
	<!-- BEGIN DELETE MODAL -->
	<jsp:include page="../common/modal/admin_delete_modal.jsp"></jsp:include>
	<!-- END DELETE MODAL -->
	<!-- BEGIN FOOTER -->
	<jsp:include page="../common/admin_bottom_footer.jsp"></jsp:include>
	<!-- END FOOTER -->
	<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
	<!-- BEGIN CORE PLUGINS -->
	<jsp:include page="../common/include/admin_last_include.jsp" flush="true">
		<jsp:param name="pathPrefix" value="../" />
	</jsp:include>
	<!-- END CORE PLUGINS -->
	<!-- BEGIN PAGE LEVEL PLUGINS -->
	<script type="text/javascript" src="../resources/js/select2.min.js"></script>
	<script type="text/javascript" src="../resources/js/jquery.dataTables.js"></script>
	<script type="text/javascript" src="../resources/js/DT_bootstrap.js"></script>
	<!-- END PAGE LEVEL PLUGINS -->
	<!-- BEGIN PAGE LEVEL SCRIPTS -->
	<script src="../resources/js/app.js"></script>
	<script src="../resources/js/table-managed.js"></script>
	<script src="../resources/js/ui-modals.js"></script>
	<script src="../resources/js/custom/general.js"></script>
	<script>
	 var dt;
	
		jQuery(document).ready(function() {
			App.init();
			var brand = encodeURIComponent(encodeURIComponent($('#brand').val()));
			var catena = encodeURIComponent(encodeURIComponent($('#catena').val()));
			var model = encodeURIComponent(encodeURIComponent($('#model').val()));
            dt = $('#datatable').dataTable({
            	"aaSorting":[[0, "asc"]],  
                "bAutoWidth": false,  
                "bServerSide": true,  
                "sSearch":"搜索",
                "bFilter":true,
                "sAjaxSource": "GetList?brand="+brand+"&catena="+catena+"&model="+model,
                "sServerMethod": "GET",
              	"aoColumns": [   
					{ 
						"mDataProp": "productIdd",
						"sName":"productIdd", 
						"bSearchable": false,
						"bSortable": false,
						"fnRender": function (obj) {
							var planId = obj.aData.productIdd; 
							return '<input name="checkid" type="checkbox" class="checkboxes" value="'+planId+'" />';
						}
					},
                	{ "mDataProp": "brandId","sName":"brandId", "bSearchable": false,"bSortable": false},  
                	{ "mDataProp": "catenaId","sName":"catenaId", "bSearchable": false,"bSortable": false}, 
                	{ "mDataProp": "modelId","sName":"modelId", "bSearchable": false,"bSortable": false}, 
                	{ "mDataProp": "specification","sName":"specification","sDefaultContent": '',"sName":"categorieId", "bSearchable": false,"bSortable": false},  
                	{ "mDataProp": "price","sName":"price", "bSearchable": false,"bSortable": false}, 
                	{ "mDataProp": "adjustPrice","sName":"adjustPrice", "sDefaultContent": '0',"bSearchable": false,"bSortable": false},
                 	{
                  		"mDataProp": "createTime",
                  		"sName":"createTime",
                      	"sClass": "center",
                      	"bSearchable": false,
                      	"bSortable": false,
                      	"fnRender": function (obj) {
                      		var planId = obj.aData.createTime;  
                      		var now = new Date(planId);
							var curr_date = now.getDate();
   							var curr_month = now.getMonth() + 1; //Months are zero based
    						var curr_year = now.getFullYear();
    						var hour = now.getHours();
							var minute = now.getMinutes();
							var second = now.getSeconds();
                        	return curr_year+'年'+curr_month+'月'+curr_date+'日';
                      	}
                  	},
                 	{
                  		"mDataProp": "productId",
                  		"sName": "productId",
                      	"sTitle": "操作",
                      	"sClass": "center",
                      	"bSearchable": false,
                      	"bSortable": false,
                      	"fnRender": function (obj) {
                      		var planId = obj.aData.productId;  
                        	return ' <a href="edit?id='+planId+'" class="btn mini purple" style="margin-right:5px;"><i class="icon-edit"></i> 修改</a><a class="btn mini black" href=javascript:linkDeleteids("'+planId+'");><i class="icon-edit"></i> 删除</a>';
                      	}
                  	}
            	],
            	 "oLanguage": {
                    "sProcessing": "正在加载中......",
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sZeroRecords": "对不起,查询不到相关数据!",
                    "sEmptyTable": "没有相关数据!",
                    "sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上一页",
                        "sNext": "下一页",
                        "sLast": "末页"
                    }
                } 
            }); 
            
            
		});
	
	
	function clickme(){
		dt.fnDestroy(); 
		var brand = encodeURIComponent(encodeURIComponent($('#brand').val()));
		var catena = encodeURIComponent(encodeURIComponent($('#catena').val()));
		var model = encodeURIComponent(encodeURIComponent($('#model').val()));
    	$('#datatable').dataTable( {
        	
        	"aaSorting":[[0, "asc"]],  
                "bAutoWidth": false,  
                "bServerSide": true,  
                "sSearch":"搜索",
                "bFilter":true,
                "sAjaxSource": "GetList?brand="+brand+"&catena="+catena+"&model="+model,
                "sServerMethod": "GET",
              	"aoColumns": [   
					{ 
						"mDataProp": "productIdd",
						"sName":"productIdd", 
						"bSearchable": false,
						"bSortable": false,
						"fnRender": function (obj) {
							var planId = obj.aData.productIdd; 
							return '<input name="checkid" type="checkbox" class="checkboxes" value="'+planId+'" />';
						}
					},
                	{ "mDataProp": "brandId","sName":"brandId", "bSearchable": false,"bSortable": false},  
                	{ "mDataProp": "catenaId","sName":"catenaId", "bSearchable": false,"bSortable": false}, 
                	{ "mDataProp": "modelId","sName":"modelId", "bSearchable": false,"bSortable": false}, 
                	{ "mDataProp": "specification","sName":"specification","sDefaultContent": '',"sName":"categorieId", "bSearchable": false,"bSortable": false},  
                	{ "mDataProp": "price","sName":"price", "bSearchable": false,"bSortable": false}, 
                	{ "mDataProp": "adjustPrice","sName":"adjustPrice", "sDefaultContent": '0',"bSearchable": false,"bSortable": false},
                 	{
                  		"mDataProp": "createTime",
                  		"sName":"createTime",
                      	"sClass": "center",
                      	"bSearchable": false,
                      	"bSortable": false,
                      	"fnRender": function (obj) {
                      		var planId = obj.aData.createTime;  
                      		var now = new Date(planId);
							var curr_date = now.getDate();
   							var curr_month = now.getMonth() + 1; //Months are zero based
    						var curr_year = now.getFullYear();
    						var hour = now.getHours();
							var minute = now.getMinutes();
							var second = now.getSeconds();
                        	return curr_year+'年'+curr_month+'月'+curr_date+'日';
                      	}
                  	},
                 	{
                  		"mDataProp": "productId",
                  		"sName": "productId",
                      	"sTitle": "操作",
                      	"sClass": "center",
                      	"bSearchable": false,
                      	"bSortable": false,
                      	"fnRender": function (obj) {
                      		var planId = obj.aData.productId;  
                        	return ' <a href="edit?id='+planId+'" class="btn mini purple" style="margin-right:5px;"><i class="icon-edit"></i> 修改</a><a class="btn mini black" href=javascript:linkDeleteids("'+planId+'");><i class="icon-edit"></i> 删除</a>';
                      	}
                  	}
            	],
            	 "oLanguage": {
                    "sProcessing": "正在加载中......",
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sZeroRecords": "对不起,查询不到相关数据!",
                    "sEmptyTable": "没有相关数据!",
                    "sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上一页",
                        "sNext": "下一页",
                        "sLast": "末页"
                    }
                } 
    	});
	}	
	
	$(function () {
        //查找id=tab的表格,下面所有的tr,下面的所有td,第一个td下面复习框的点击事件。
        $("#checkAll").click(function(){
        	if ($("#checkAll").attr("checked") == "checked") {
                $("input[name='checkid']").attr("checked", true);
            }else {
            	$("input[name='checkid']").attr("checked", false);
            }
        });
    })
	
	function updateAdjPrice(){
		if(window.confirm("是否修改当前条件下产品调价率?")){
			var brand = encodeURIComponent(encodeURIComponent($('#brand').val()));
			var catena = encodeURIComponent(encodeURIComponent($('#catena').val()));
			var model = encodeURIComponent(encodeURIComponent($('#model').val()));
			var adjustPrice=encodeURIComponent(encodeURIComponent($('#adjustPrice').val()));
			window.location.href = "updateAdjPrice?adjustPrice="+adjustPrice+"&brand="+brand+"&catena="+catena+"&model="+model;
            return false;
         }else{
            return false;
        }
	}
		
		
	function linkAdd(){
		window.location.href = "add?universityId=${universityId}";
	}
	
	function linkDeleteids(id){
		var brand = encodeURIComponent(encodeURIComponent($('#brand').val()));
		var catena = encodeURIComponent(encodeURIComponent($('#catena').val()));
		var model = encodeURIComponent(encodeURIComponent($('#model').val()));
		var chk_value="";
		if(id!=null&&id!=""){
			chk_value=id;
		}else{
			$("input[name='checkid']:checked").each(function(){
				if(chk_value==""){
					chk_value=$(this).val();
				}else{
					chk_value=chk_value+","+$(this).val();
				}
				
			});
			if(chk_value==null||chk_value==""){
				alert("您还未选中任何数据!");
				return false;
			}
		}
		
		if(!window.confirm("你确定要删除选中数据吗?")){
            return;
        }
		window.location.href = "delete?ids="+chk_value+"&brand="+brand+"&catena="+catena+"&model="+model;
        return false;
	}
	
	function  edit(id){
		window.location.href = "edit?universityId=${universityId}&id="+id;
	}
		var msg ='${msg}';
		if(msg != ''){
			alert(msg);
		}
	</script>
</body>
<!-- END BODY -->
</html>

你可能感兴趣的:(JavaScript,html,jquery,jsp)