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;
}