easyui 分页表格插件带搜索
2017-01-18 09:27
330 查看
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>
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);
<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>
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);
相关文章推荐
- ExtJs 备忘录(6)—— GirdPanl表格(二) [ 搜索分页 ]
- 很好用的jquery表格分页插件
- easyui datagrid 客户端搜索、分页、排序
- EasyUi中的Combogrid 实现分页和动态搜索远程数据
- EasyUi中的Combogrid 实现分页和动态搜索远程数据
- 用jQuery和jTemplates插件实现客户端分页的表格展现
- easyUI 数据表格客户分页
- 基于asp.net + easyui框架,一步步学习easyui-datagrid——实现分页和搜索(二)
- EasyUi datagrid 实现表格分页
- 基于Bootstrap3表格插件和分页插件实例详解
- 一个非常好用的Jquery表格分页插件——jPages
- jquery分页插件(简洁、兼容、类似浏览器搜索分页效果)
- dojo表格分页插件报错
- easyui的自动分页表格以及行编辑模式edatagrid
- jquery DataTables表格插件的使用(网页数据表格化及分页显示)
- jqGrid表格插件-struts分页
- dojo表格分页插件报错
- easyui datagrid 客户端搜索、分页、排序
- 基于asp.net + easyui框架,一步步学习easyui-datagrid——实现分页和搜索(二)
- 03.手把手教你 .Net EasyUI DataGrid(带搜索功能的数据表格)