layui-ajax-ssm(mybatis generator 逆向生成)实现模糊查询

1、html 部分

    <form class="layui-form">
        <div class="layui-form-item" style="float: right;">
            <div class="layui-input-inline">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入文章标题" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo" id="article_title_btn">搜索</button>
            </div>
        </div>

    </form>

2、js 部分

//搜索框表单 监听提交

 layui.use(['laypage', 'layer','element','table'], function(){

            var laypage = layui.laypage;
            var layer = layui.layer;
            var element = layui.element;
            var table = layui.table;
            var form = layui.form;

            form.on('submit(formDemo)', function(data){
                $.post('${ctxPath}/article/selectArticleByTitleLink',data.field,function(result){
                console.log(result);

                /* 加载表格数据

                            result.data 是从后台传过来的数据

                         */

                    table.render({
                        elem: '#article_list',
                        data:result.data,
                        page: false, //开启分页
                        cols: [[ //表头
                            {field: 'articleId', title: 'ID', sort: true, fixed: 'left',align:"center",width:'10%'},
                            {field: 'title', title: '标题',align:"center",width:'20%'},
                            {field: 'courseName', title: '课程名称',align:"center",width:'40%'},
                            {field: 'addTime', title: '添加时间',align:"center",templet: '#addTime',width:'20%'},
                           {field:'', title:'操作', toolbar: '#barDemo',templet:"#articleEdit",unresize: true,align:"center",width:'10%'}
                        ]]
                    });
                });
                
                return false;

            });

});

下面是 layui 官网来的对data的介绍；地址：http://www.layui.com/doc/modules/table.html#options

data

Array

直接赋值数据。既适用于只展示一页数据，也非常适用于对一段已知数据进行多页展示。

[{}, {}, {}, {}, …]

3、java 部分

    3.1 MrtArticleController.java

            /**
* 通过标题进行模糊查询
* */
@ResponseBody
@RequestMapping("/selectArticleByTitleLink")
public Object selectArticleByTitleLink(@RequestParam("title") String title) {
try {

List<MrtArticle> list = mrtArticleService.selectArticleByTitleLink(title);

                        LayUIResult result = LayUIResult.build(0, "", list);      // 这里封装返回的JSON格式

result.setCount(list.size());
return result;
} catch (Exception e) {
LayUIResult result = LayUIResult.build(0, "", "");
result.setCount(0);
return result;
}

}

        3.2 MrtArticleService.java

            // 通过标题进行模糊查询

    List<MrtArticle> selectArticleByTitleLink(String title);

        3.3 MrtArticleServiceImpl.java

            //通过标题进行模糊查询
@Override
public List<MrtArticle> selectArticleByTitleLink(String title) {
MrtArticleExample example = new MrtArticleExample();
Criteria criteria = example.createCriteria();
criteria.andTitleLike("%"+title+"%");        // 拼装模糊查询语句
List<MrtArticle> list = mrtArticleMapper.selectByExample(example);
return list;
}