接我的上篇博客  EasyUI_使用datagrid分页 (Day_28) .

按惯例,我们先看效果图

EasyUI 实现多条件分页很简单。

我们先来通过官网了解下这两个属性:

显然,有了load 方法后,什么Ajax啥的都没有它来的方便。它会将响应的数据加载到datagrid中,datagrid会自动的请求URL路径,从而实现带条件分页。

tt是我的表格,{}内是传递的参数。

 $('#tt').datagrid('load',{"sName":sName,"sMaxWeight":sMaxWeight,"sMinWeight":sMinWeight,"sUid":sUid});

于是,我们实现多条件分页可大致分为这么几个步骤

1、获取文本框中输入要查询的文本值

2、使用datagrid的load方法,发送参数

3、数据自动重新加载

接下来上代码

先上jsp:

 1 //表格
2 <table id="tt"
3 class="easyui-datagrid"
4 striped="true"
5 url="/jsp/Standard/StandardAll"
6 toolbar="#tb"
7 pagination="true"
8 pageList="[1,2,3]"
9 fit="true">
10 <thead>
11 <tr>
12 <th field="id" width="120" align="center" checkbox="true">编号</th>
13 <th field="name" width="120" align="center">收派名称</th>
14 <th field="minweight" width="120" align="center">最小重量</th>
15 <th field="maxweight" width="120" align="center">最大重量</th>
16 <th field="user_id" width="120" align="center">操作人</th>
17 <th field="updatetime" width="150" align="center">操作时间</th>
18 </tr>
19 </thead>
20 </table>
21
22 <%--侧边栏查询区域--%>
23 <div data-options="region:'east',iconCls:'icon-search',title:'搜索栏',split:true" style="width:300px;">
24 <div region="center" border="false" style="padding: 10px;">
25 <table cellpadding=6>
26 <tr><input id="11" type="text" style="display:none;"/></tr>
27 <tr>
28 <td>收派标准名称:</td>
29 <td><input id="sName" name="sName" type="text" class="txt01"/></td>
30 </tr>
31 <tr>
32 <td>最大重量:</td>
33 <td><input id="sMaxWeight" name="sMaxWeight" type="text" class="txt01"/></td>
34 </tr>
35 <tr>
36 <td>最小重量:</td>
37 <td><input id="sMinWeight" name="sMinWeight" type="text" class="txt01"/></td>
38 </tr>
39 <tr>
40 <td>操作人:</td>
41 <td><input id="sUid" name="sUid" type="text" class="txt01"/></td>
42 </tr>
43 <tr>
44 <td align="right"><a class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="seach()">查询</a></td>
45 <td align="right"><a class="easyui-linkbutton" iconCls="icon-reload" plain="true" type="reset" onclick="reset()">重置</a></td>
46 </tr>
47 </table>
48 </div>
49 </div>

查询方法: 将需要做查询的参数获取,传递。

1  /*带分页查询*/
2 function seach() {
3 var sName=$('#sName').val();
4 var sMaxWeight=$('#sMaxWeight').val();
5 var sMinWeight=$('#sMinWeight').val();
6 var sUid=$('#sUid').val();
7 $('#tt').datagrid('load',{"sName":sName,"sMaxWeight":sMaxWeight,"sMinWeight":sMinWeight,"sUid":sUid});
8 }

Controller层:

 1 @RequestMapping("StandardAll")
2 @ResponseBody
3 public Object StandardAll(Integer page,Integer rows,String sName,String sMaxWeight,String sMinWeight,String sUid)
4 {
5
6
7 Page<Standard> pageInfo = PageHelper.startPage(page, rows);
8 /*获得所有取派信息*/
9 List<Standard> list = standardService.SelAll(sName,sMaxWeight,sMinWeight,sUid);
10 /*获取总记录条数,将结果响应给浏览器 json格式*/
11 long total = pageInfo.getTotal();
12 /*封装在map中*/
13 Map<String,Object> map=new HashMap<String,Object>();
14 /*前面我们知道,pagination 分页是根据rows,pages,所以只需根据map 键值对的特点来找到rows*/
15 map.put("rows",list);
16 map.put("total",total);
17 return JSON.toJSON(map);
18 }

Service层:

1 public List<Standard> SelAll(String sName,String sMaxWeight,String sMinWeight,String sUid);

Service 实现类: 名称做模糊查询,具体的数值做精确查询

 1     public List<Standard> SelAll(String sName,String sMaxWeight,String sMinWeight,String sUid) {
2 StandardExample standardExample=new StandardExample();
3 StandardExample.Criteria criteria = standardExample.createCriteria();
4 //默认筛选状态为0,也就是可用的取派标准信息
5 criteria.andDeltagEqualTo("0");
6 //判断,当它们非空时,添加条件筛选
7 if (sName!=null&&!(sName.equals("")))
8 {
9
10 criteria.andNameLike("%"+sName+"%");
11 }
12 if (sMaxWeight!=null&&!(sMaxWeight.equals("")))
13 {
14 criteria.andMaxweightEqualTo(Double.parseDouble(sMaxWeight));
15 }
16 if (sMinWeight!=null&&!(sMinWeight.equals("")))
17 {
18 criteria.andMinweightEqualTo(Double.parseDouble(sMinWeight));
19 }
20 if (sUid!=null&&!(sUid.equals("")))
21 {
22 criteria.andUser_idLike(sUid);
23 }
24 List<Standard> ListStandardList = standardMapper.selectByExample(standardExample);
25 return ListStandardList;
26 }

好,使用easyui  datagrid 分页就告一段落了。

有什么不懂可以私信博主。

多条件分页 (Day_31)的更多相关文章

  1. AspNetPager 多条件分页查询

    AspNetPager 这个分页控件一般做后台基本都知道的,我就不多说了(说明与下载链接:http://www.webdiyer.com/Controls/AspNetPager),嘿嘿!其实我也是刚 ...

  2. asp.net mvc多条件+分页查询解决方案

    开发环境vs2010 css:bootstrap js:jquery bootstrap paginator 原先只是想做个mvc的分页,但是一般的数据展现都需要检索条件,而且是多个条件,所以就变成了 ...

  3. 【java】spring-data-jpa 集成hibernate实现多条件分页查询

    初次接触spring-data-jpa,实现多条件分页查询. 基础环境 Spring Boot+spring-data-jpa+hibernate+mysql 1.接口 要继承这个接口,这个接口提供了 ...

  4. 重构MVC多条件分页解决方案

    重构MVC多条件+分页解决方案 为支持MVC的验证,无刷新查询,EF,以及让代码可读性更强一点,所以就重构了下原来的解决方案. 这里就简单讲下使用方法吧: Model: 继承PagerBase:  S ...

  5. MVC+Bootstrap+Drapper使用PagedList.Mvc支持多查询条件分页

    前几天做一个小小小项目,使用了MVC+Bootstrap,以前做分页都是异步加载Mvc部分视图的方式,因为这个是小项目,就随便一点.一般的列表页面,少不了有查询条件,下面分享下Drapper+Page ...

  6. springboot+thymeleaf+pageHelper带条件分页查询

    html层 <div> <a class="num"><b th:text="'共 '+ ${result.resultMap['pages ...

  7. [工作日志] 2018-11-30 重要: 1. 多条件+ 分页 + 多表联查 2. idea拉新分支

    多条件+ 分页 + 多表联查 多条件查询 1.pom依赖 <dependency> <groupId>commons-dbutils</groupId> <a ...

  8. .NetCore 分页控件实现原理处理以及条件分页处理

    说明 自定义一个类继承TagHelper,注意自定义类的 必须以TagHelper结尾,这个有点类是属性 Attribute的写法 protected TagHelper(); // // 摘要: / ...

  9. thinkphp 带条件分页查询

    thinkphp 带条件分页查询:form表单传值时候,method='get'. 用 get 传值

随机推荐

  1. 2.EL表达式&JSTL标签库常用方法

    1.EL表达式 Expression Language表达式语言,主要是代替jsp页面中的表达式脚本在jsp页面中进行数据的输出. 格式为${表达式} EL表达式输出Bean的普通属性.数组属性.Li ...

  2. EasyCode Entity 实体类模板 IDEA

    自己修改了一份EasyCode的实体类模板,防止日后找不到在这里存一下 修改了如下内容: 取消生成GetSet方法,改用Lombok 修改默认命名规则,改为[表名Entity.java] 取消了实现序 ...

  3. prometheus+grafana监控mysql最佳实践

    导航 前言 环境准备 安装Docker 安装prometheus 安装mysqld_exporter prometheus采集数据 安装grafana grafana配置数据源 感谢您的阅读,预计阅读 ...

  4. 深入探索Android热修复技术原理读书笔记 —— 热修复技术介绍

    1.1 什么是热修复 对于广大的移动开发者而言,发版更新是最为寻常不过的事了.然而,如果你 发现刚发出去的包有紧急的BUG需要修复,那你就必须需要经过下面这样的流程: 这就是传统的更新流程,步骤十分繁 ...

  5. linux下export命令添加删除环境变量

    Linux export命令参数   功能说明:设置或显示环境变量. 语 法:export [-fnp][变量名称]=[变量设置值] 补充说明:在shell中执行程序时,shell会提供一组环境变量. ...

  6. 【小技巧】Windows 小技巧

    快捷键: 1.Win7窗口最大化和最小化快捷键 最大化:window+↑ 最小化:window+↓

  7. c语言编程学习之二维数组

    二维数组 c语言按照行主序存储二维数组.也就是说,二维数组元素在内存中的位置是连续的,每行末尾元素(若不是最后一行)的下一个元素就是下一行的首元素. 如下图所示 接下来我们来分析一下如何将二维数组所有 ...

  8. CLS的探索:Python如何让日志免费云化

    前言 日志服务(Cloud Log Service,CLS)是腾讯云提供的一站式日志服务平台,提供了从日志采集.日志存储到日志检索,图表分析.监控告警.日志投递等多项服务,协助用户通过日志来解决业务运 ...

  9. BUAA-OO-第四单元总结——终章

    面向对象第四单元博客总结--终章 第四单元作业设计 第13次作业设计 类和对应方法属性设计 类设计如下图所示 本次作业主要涉及六个类,其中包括主类 Main ,通用Map类 UmlElementIdM ...

  10. wrk 及扩展支持 tcp 字节流协议压测

    wrk 及扩展支持 tcp 字节流协议压测 高性能.方便使用的 HTTP(s) 的流量压测工具,结合了多个开源项目开发而成: redis 的 ae 事件框架 luajit openssl http-p ...