layui的数据表格+springmvc实现搜索功能

忘是亡心i 2022-05-22 00:56 212阅读 0赞

###  layui的数据表格+springmvc实现搜索功能 ###

没有用过layui可以看看：[ layui的数据表格+springmvc实现数据显示，分页功能 ][layui_springmvc_]

![70][]

主要在前端页面加：

<div class="demoTable">
        搜索ID：
        <div class="layui-inline">
            <input class="layui-input" name="keyWord" id="keyWord" autocomplete="off">
        </div>
        <span class="input-group-btn">
                                <select name="keyType" id="key_type" class="layui-btn">
                                    <option value="userid" selected="selected">userid</option>
                                     <option value="content"  >content</option>
                                </select>
            </span>
        <button class="layui-btn" data-type="reload">搜索</button>
    
    </div>

在js中加上：

reload:function () {
        var keyWord=$("#keyWord").val();
        var keyType=$("#key_type option:selected").val();
        table.reload('contenttable',{
            method:'post',
            where:{keyWord:keyWord,keyType:keyType}
        });
    }

js的全貌：

通过reroad重载把参数传到springmvc后台进行模糊查询，再把查到的数据返回就好了。

其中springmvc控制层代码：

/**
     * layui-content后台代码
     * @return
     */
    @RequestMapping(value = "/backContent")
    @ResponseBody
    public ResultMap<List<Content>> backContent(Page page, @RequestParam("limit") int limit){
        page.setRows(limit);
      
        List<Content>contentList=contentService.selectPageList(page);
        int totals=contentService.selectPageCount(page);
       
        page.setTotalRecord(totals);
        return new ResultMap<List<Content>>(0,"",totals,contentList);
    }

因为layui返回的参数不单单是json数组，要符号其的数据格式才能在jsp页面显示数据，所以用ResultMap类来处理返回数据的格式。

package net.stxy.one.model;
    
    /**
     *
     * layui数据表格返回数据处理类
     * Created by ASUS on 2018/5/19
     *
     * @Authod Grey Wolf
     */
    public class ResultMap<T> {
        private String msg;
        private  T data;
        private  int code;
        private  int count;
    
        public String getMsg() {
            return msg;
        }
    
        public void setMsg(String msg) {
            this.msg = msg;
        }
    
        public T getData() {
            return data;
        }
    
        public void setData(T data) {
            this.data = data;
        }
    
        public int getCode() {
            return code;
        }
    
        public void setCode(int code) {
            this.code = code;
        }
    
        public int getCount() {
            return count;
        }
    
        public void setCount(int count) {
            this.count = count;
        }
    
        public ResultMap(int code,String msg,  int count,T data) {
            this.code = code;
            this.msg = msg;
            this.count = count;
            this.data = data;
        }
    
        public ResultMap() {
        }
    }

其中mapper的语句：

<select id="selectPageList" parameterType="net.stxy.one.model.Page" resultMap="BaseResultMap" >
      select
      <include refid="Base_Column_List" />
      from content
      <where>
      
        <if test="keyWord!='' and keyType=='userid' ">
           AND userid like '%' #{keyWord} '%'
        </if>
        <if test="keyWord!='' and keyType=='content' ">
           AND content like '%' #{keyWord} '%'
        </if>
    
      </where>
      order by id DESC
      limit #{start},#{rows}
    </select>
    
    
    <select id="selectPageCount" parameterType="net.stxy.one.model.Page"  resultType="java.lang.Integer">
      select count(1) from content
        <where>
    
          <if test="keyWord!='' and keyType=='userid' ">
            AND userid like '%' #{keyWord} '%'
          </if>
          <if test="keyWord!='' and keyType=='content' ">
             AND content like '%' #{keyWord} '%'
          </if>
    
     </where>
    </select>

### 我的座右铭：不会，我可以学；落后，我可以追赶；跌倒，我可以站起来；我一定行。 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTIyMDQ3Mg_size_16_color_FFFFFF_t_70][]

[layui_springmvc_]: https://blog.csdn.net/weixin_39220472/article/details/80376468
[70]: /images/20220522/661004e0256b439289f6dfb1bf9dbb1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTIyMDQ3Mg_size_16_color_FFFFFF_t_70]: /images/20220522/7484d29bc81e4060bc1c923428ea11db.png