`
umbrellall1
  • 浏览: 145810 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

dataTable的调用查询

javascripthtmljspjquery 
阅读更多 
<%@ 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>
分享到：
| 伴车星webservice调用例子
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Jquery dataTable后台获取数据示例

    使用Spring MVC，可以在Controller层接收前端传来的页码和每页大小，然后在Service层调用Ibatis的`selectPage`方法或者自定义分页SQL查询，返回对应页的数据。 2. **排序**: DataTables 会将排序信息（列号和排序...

    C# 连接各种数据库返回DataTable的方法

    `sql`是执行的SQL查询，`DataTable`对象将存储查询结果。`Fill`方法用于将数据库中的数据填充到`DataTable`中。 在实际开发中，为确保安全性和性能，应使用参数化查询防止SQL注入，以及适当地关闭和释放数据库连接...

    VB.NET的DataTable常用方法总结

    允许标记某行数据为删除状态，但不会立即从表中移除，需调用`DataTable.AcceptChanges()`或`DataTable.RejectChanges()`来最终确认或撤销这一操作。 #### 二、列操作：追加与删除 对于列的操作主要包括列的添加和...

    C# datatable删除多行

    总结起来，C#中删除DataTable多行的方法主要包括：使用Delete()方法标记行并随后调用AcceptChanges()，或者直接使用RemoveAt()方法删除行。在处理大量数据时，应考虑性能优化，如先收集待删除行的索引，然后按降序...

    DataTable技术全面讲解

    4. 查询数据：DataTable提供强大的查询能力，可以通过`Select()`方法配合表达式进行筛选。 四、DataTable与数据库的交互 1. DataAdapter：DataTable常与DataAdapter一起使用，DataAdapter负责在数据库和DataTable...

    C#使用读取文件方式读取DBF库生成DataTable，将DataTable生成DBF

    - 调用DbfReader的GetFields方法获取字段信息，这些信息用于创建DataTable的列。 - 使用DbfReader的Read方法读取每一行数据，将其转化为DataRow并添加到DataTable中。 - 最后，关闭DbfReader以释放资源。 2. **...

    datatable学习资料

    这里`#example`是表格的ID，`DataTable()`则是初始化的调用。 3. **数据源** DataTable支持多种数据源，包括DOM、JSON、Ajax、服务器端处理等。比如，可以使用Ajax获取服务器数据： ```javascript $('#example'...

    C#DataTable学习源码

    `DataTable`提供了一个在内存中存储数据的表格结构，可以用来处理数据库查询的结果，或者作为独立的数据集进行操作。这个压缩包文件"CS_DataTable"包含了关于C#中`DataTable`对象使用的源码示例，对于学习和理解如何...

    修改DataTable的某一行某一列的值

    - 对于大数据量的`DataTable`，频繁地调用`BeginEdit()`、`EndEdit()`可能会导致性能下降。在实际应用中，可以尽量减少这样的操作次数。 3. **并发控制**： - 如果多个线程同时访问或修改同一个`DataTable`，需要...

    DataTable缓存数据操作

    current 表示当前值，default 根据操作的不同决定行的 default 值，original 是最后一次调用 AcceptChanges() 之后的值，proposed 是调用 AcceptChanges() 之前的值。 行的状态可以通过 RowState 属性获得，例如...

    DataTable简介

    DataTable不直接连接到数据库，而是作为内存中的数据容器，可以用来暂存从数据库查询的数据或者构建自定义的数据集。 在创建DataTable时，可以通过不同的构造函数来初始化。无参构造函数`DataTable()`用于创建一个...

    在java下可用的datatable组件

    在java下可用的datatable组件，提供了jar包和调用例子。jar包从国外一个网站找到的，可惜找遍了也没找到怎么使用，费了半天挨个试，终于知道怎么用了（从resultset到datatable，加行，加列，赋值，取值，循环显示等...

    java中可使用的datatable

    在java下可用的datatable组件，提供了jar包和调用例子。jar包从国外一个网站找到的，可惜找遍了也没找到怎么使用，费了半天挨个试，终于知道怎么用了（从resultset到datatable，加行，加列，赋值，取值，循环显示等...

    jQuery Datatable 多个查询条件自定义提交事件(推荐)

    在使用DataTable时，我们有时需要实现自定义的查询条件和提交事件，以便根据用户的输入动态地加载和更新数据。本篇文章将详细探讨如何在jQuery DataTables中实现多个查询条件的自定义提交事件。 首先，我们需要在...

    XML与DataTable相互转换

    这段代码首先创建了一个`StringWriter`对象`tr`，然后通过调用`DataTable`对象的`WriteXml`方法将数据表写入`StringWriter`中。最后，将`StringWriter`中的内容转换为字符串返回。 如果需要将`DataSet`转换为XML，...

    datatable的固定列插件

    通过调用`fixedColumns()`方法，并传入配置对象，可以定制固定列的行为。例如： ```javascript $(document).ready(function() { var table = $('#example').DataTable(); table.fixedColumns().initialize({ ...

    C# DataSet和DataTable详解

    查看调用SqlDataAdapter.Fill创建的结构 当我们使用SqlDataAdapter的Fill方法填充DataSet对象时，-fill方法将根据数据库表的结构创建一个DataTable对象。我们可以通过查看DataTable的Columns集合来了解表的结构： ...

    DataTable案例.rar

    2. 初始化DataTable：在HTML表格元素上应用jQuery选择器，并调用DataTable方法。 3. 配置选项：根据需求设置分页大小、排序规则、搜索条件等。 4. 添加扩展功能：如通过插件实现导出和打印，需要额外编写或引入对应...

    DataTable 介绍

    - 当调用 `Update()` 方法时，DataAdapter 会检查 DataTable 中的更改（添加、删除、更新的行），并生成相应的 SQL 语句。对于 UPDATE 语句，它会使用 WHERE 子句来定位要更新的行，通常是基于主键或其他唯一标识符...

    合并两个Datatable

    通常情况下，当我们从数据库中查询出多张表的数据时，这些数据会被分别存储在不同的`DataTable`对象中。为了进一步处理或分析这些数据，我们需要将它们合并到同一个`DataTable`中。本文介绍的方法适用于需要将两个`...

Magicbox
Global site tag (gtag.js) - Google Analytics