easyui 分頁表格插件帶搜索

1：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代碼：

    

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);