Layui表格条件查询带分页

前端代码

1. html

       ...
       <div class="tablebox">
           <div id="catalog" lay-filter="catalogFilter"></div>
       </div>
       ...
       <script type="text/html" id="order">
           {{d.LAY_TABLE_INDEX+1}}
       </script>
       ...
   

2. js

       var table, form, layer;
       var catalogRow; // 目录列表当前行
       var catalogQuery = {}; // 目录列表查询过滤条件
   
       layui.use(['table', 'form', 'layer'], function () {
           table = layui.table,
               form = layui.form,
               layer = layui.layer
   
           initCatalogTable();
           monitor();
       });
   
       /**
        * 初始化目录列表
        */
       function initCatalogTable() {
           catalogQuery.type = "catalog";
           table.render({
               id: 'catalogID'
               , elem: '#catalog'
               , height: 'full-125'
               , title: '目录列表'
               , url: projectUrl + '/dict/getCatalogList'
               , page: true
               , limit: 15
               , limits: [15, 30, 45, 60, 75, 90]
               , contentType: "application/json" // 传对象参数
               , method: 'post' // 改为post
               , where: catalogQuery // 查询条件
               , request: {
                   pageName: 'page',   // 当前页
                   limitName: 'limit'  // 每页记录数
               }
               , parseData: function (res) {
                   return {
                       "code": 0,
                       "msg": "",
                       "count": res.data.total,
                       "data": res.data.records
                   }
               }
               , cols: [[
                   {
                       fixed: 'left',
                       title: '序号',
                       align: 'center',
                       width: 80,
                       templet: '#order'
                   }
                   , {
                       field: 'name',
                       title: '名称',
                       width: 180,
                       templet: function (res) {
                           return res.name || '';
                       }
                   }
                   ...
                   , {
                       fixed: 'right',
                       title: '操作',
                       align: 'center',
                       width: 300,
                       templet: function (res) {
                           var html = '<a class="layui-btn layui-btn-xs layui-fontbtn" lay-event="editCatalog">编辑</a>';
                           html += '<a class="layui-btn layui-btn-xs layui-fontbtn" lay-event="item">字典项</a>';
                           html += '<a class="layui-btn layui-btn-xs layui-fontbtn layui-btn-danger" lay-event="deleteCatalog">删除</a>';
                           return html;
                       }
                   }
               ]]
           });
   
           table.on('tool(catalogFilter)', function (obj) {
               catalogRow = obj.data;
               if (obj.event === 'editCatalog') {
                   editCatalog();
               } else if (obj.event === 'item') {
                   openItemIframe();
               } else if (obj.event === 'deleteCatalog') {
                   deleteCatalog();
               }
           });
       }
   
       /**
        * 监听事件
        */
       function monitor() {
           $("#catalogSearch").click(function () {
               catalogQuery.name = $("#catalogNameSearch").val();
               catalogQuery.code = $("#catalogCodeSearch").val();
               table.reload('catalogID', {
                   where: catalogQuery
                   , page: {
                       curr: 1  // 从第1页开始
                   }
               });
           })
       }
   

后端代码

1. 查询条件基类

       @Data
       public class ConfigBaseQo {
           /**
            * 当前页
            */
           private Integer page;
   
           /**
            * 每页记录数
            */
           private Integer limit;
       }
   

2. 数据字典查询条件类，继承查询条件基类

       @Data
       public class ConfigDictQo extends ConfigBaseQo {
           /**
            * 字典名称
            */
           private String name;
   
           /**
            * 字典编码
            */
           private String code;
   
           /**
            * 字典类型
            */
           private String type;
           ...
       }
   

3. controller

       /**
        * 目录列表条件查询带分页
        *
        * @param configDictQo 查询条件
        * @return
        */
       @RequestMapping("/getCatalogList")
       ResponseData getCatalogList(@RequestBody(required = true) ConfigDictQo configDictQo) {
           return successWithData(configDictService.getCatalogList(configDictQo));
       }
   

4. service接口

       Page<ConfigDict> getCatalogList(ConfigDictQo configDictQo);
   

5. service接口实现类

       @Override
       public Page<ConfigDict> getCatalogList(ConfigDictQo configDictQo) {
           QueryWrapper<ConfigDict> queryWrapper = new QueryWrapper<>();
           if (StringUtils.isNotBlank(configDictQo.getType())) {
               queryWrapper.eq(ConfigDict.TYPE, configDictQo.getType());
           }
           if (StringUtils.isNotBlank(configDictQo.getName())) {
               queryWrapper.like(ConfigDict.NAME, configDictQo.getName());
           }
           if (StringUtils.isNotBlank(configDictQo.getCode())) {
               queryWrapper.like(ConfigDict.CODE, configDictQo.getCode());
           }
           Page<ConfigDict> page = new Page<>(configDictQo.getPage(), configDictQo.getLimit());
           return baseMapper.selectPage(page, queryWrapper);
       }