easyui 分页表格插件带搜索

1:html代码:html

  

<div class="row">
	<form id="manufactureFormSearch">
		<table class="formtable">
			<tr>
				<td><label for="manufactureName">制造商名称:</label></td>
				<td><input type="text" name="manufactureName" class="easyui-textbox" placeholder="制造商名称"></td>
				<td><label for="manufactureNameEn">制造商英文名称:</label></td>
				<td><input type="text" name="manufactureNameEn" class="easyui-textbox" placeholder="制造商英文名称"></td>
			</tr>
			<tr>
				<td><label for="createUserid">建立人帐号:</label></td>
				<td><input type="text" name="createUserid" class="easyui-textbox" placeholder="建立人帐号"></td>
				<td><label for="createTime">建立起止时间:</label></td>
				<td>
				    <input type="text" name="createTimeFrom" class="easyui-datetimebox" placeholder="建立开始时间">~
				    <input type="text" name="createTimeTo" class="easyui-datetimebox" placeholder="建立结束时间">
				</td>
				
			</tr>
			<tr>
			    <td><label for="updateUserid">最后一次更新人帐号:</label></td>
				<td><input type="text" name="updateUserid" class="easyui-textbox" placeholder="最后一次更新人帐号"></td>
				<td><label for="updateTime">最后一次更新起止时间:</label></td>
				<td>
				    <input type="text" name="updateTimeFrom" class="easyui-datetimebox" placeholder="最后一次更新开始时间">~
				    <input type="text" name="updateTimeTo" class="easyui-datetimebox" placeholder="最后一次更新结束时间">
				   
                </td>
				
			</tr>
			<tr>
			  <td><label for="status">状态:</label></td>
				<td>
				  <select id="statusOption" class="easyui-combobox" name="status" style="width:100px;">
				     <option value="-1">----请选择----</option>
				     <option value="0">未激活</option>
			         <option value="1">已激活</option>
				  </select>
				
				</td>
			</tr>
		</table>
		<div>
			<a href="#" onclick="searchManufacture()" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
		</div>
	</form>
</div>
<div class="row">
	<div id="manufactureTableToolBar">
		<a href="#" onclick="showManufactureDialog()" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">新增</a>
	</div>
	<table id="manufactureTable">
		<thead>
			<tr>
				<th data-options="field:'id'">制造商编号</th>
				<th data-options="field:'manufactureName'">制造商名称</th>
				<th data-options="field:'manufactureNameEn'">制造商英文名称</th>
				<th data-options="field:'manufactureWebsite'">制造商网站</th>
				<th data-options="field:'manufactureImage',formatter:manufactureImageFormatter">制造商图片</th>
				<th data-options="field:'createUserid'">建立人帐号</th>
				<th data-options="field:'createTime',formatter:dateFormatter">建立时间</th>
				<th data-options="field:'updateUserid'">最后一次更新人帐号</th>
				<th data-options="field:'updateTime',formatter:dateFormatter">最后一次更新时间</th>
				<th data-options="field:'status',formatter:manufactureStatusFormatter">状态</th>
				<th data-options="field:'action',formatter:manufactureActionFormatter,width:100">操做</th>
			</tr>
		</thead>
	</table>
</div>

2:js代码:ajax

    

var MANUFACTURE_API_BASE_URL = "${rc.contextPath}/manufacture/";
	$(function() {
		$('#manufactureTable').datagrid({
			toolbar:'#manufactureTableToolBar',
			pagination : true,//显示分页  
			pageSize : 20,//分页大小  
			pageList : [ 20, 50, 100 ],
			loader : manufactureTableLoader,
			onDblClickRow : showManufactureDialog
		});
		
	})
function manufactureTableLoader(param, success, error) {
		
		var queryParams = $('#manufactureFormSearch').serializeJson();
		queryParams.pageIndex = param.page;
		queryParams.pageSize = param.rows;
		if(queryParams.status=="-1"){
			queryParams.status="";
		}
		queryParams.createTimeFrom= date2Long(queryParams.createTimeFrom);
		queryParams.createTimeTo=date2Long(queryParams.createTimeTo);
		queryParams.updateTimeFrom=date2Long(queryParams.updateTimeFrom);
		queryParams.updateTimeTo=date2Long(queryParams.updateTimeTo);
		
		$.ajax({
			type : "post",
			url : MANUFACTURE_API_BASE_URL + "query.html",
			data : queryParams,
			dataType : "json",
			success : function(res) {
				var result = {};
				result.total = res.total;
				result.rows =  res.records;
				success(result);
			},
			error : function() {
				error.apply(this, arguments);
			}
		});
		
		function searchManufacture() {
		$('#manufactureTable').datagrid("getPager").pagination("select",1);
相关文章
相关标签/搜索