首先定义一个文本框和一个搜索 注意搜索按钮里的 data-type=“reload” 和input id
<div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">搜索内容</label> <div class="layui-input-inline"> <input type="text" class="layui-input" name="title" id="title" value="${articleTitleQuery.title}" placeholder="请输入搜索内容"> </div> </div> <div class="layui-inline buttonDiv"><button class="layui-icon layui-btn layui-btn-normal layui-btn-sm" data-type="reload">搜索</button></div> </div> //定义一个表格 <table class="layui-hide" id="demo" lay-filter="test" lay-filter="yulan"></table> layui.use(['form','table'], function(){ var form = layui.form; var table = layui.table; //执行一个 table 实例 table.render({ id: 'title', elem: '#demo' ,url: '/article/admin/do/list/1' //数据接口 ,title: '文章资讯' // ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档 ,page: true, toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档 ,request: { pageName: 'start' //页码的参数名称，默认：page , limitName: 'size' //每页数据量的参数名，默认：limit }, response :{ statusName: 'current' //规定数据状态的字段名称，默认：code ,statusCode: 200 //返回状态码 ,countName: 'total', dataName: 'records' } ,cols: [[ //表头 {type: 'radio', fixed: 'left'} ,{field: 'title', title: '文章标题',fixed: 'left', width:450, event:'title'} ,{field: 'id', title: 'ID', width:160, sort: true, totalRowText: '合计：'} ,{field: 'hotspot', title: '是否热点', width: 120, sort: true, totalRow: true} ,{field: 'recommend', title: '是否推荐', width:120, sort: true} ,{field: 'orderNum', title: '文章排序', width: 120, sort: true, totalRow: true} ,{field: 'collectNum', title: '收藏数', width:120} ,{field: 'commentNum', title: '评论数', width: 120} ,{field: 'browseTimes', title: '浏览数', width: 120} ,{field: 'origin', title: '发布来源', width: 120, sort: true, totalRow: true} ,{field: 'createTime', title: '创建时间', width: 200,templet: "<div>{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"}//layui定义的时间类型 ,{field: 'manualKeyword', title: '手动搜索关键字', width: 180, sort: true, totalRow: true} ,{field: 'titleType', title: '布局类型', width: 150, sort: true, totalRow: true} ]] }); )};注意：
//这是Layui 给 后台添加的映射 映射controller 的实体类 var $ = layui.$, active = { reload: function () { //获取 上面input 值 var title = $('#title'); var manualKeyword = $('#manualKeyword'); var creatData = $('#createTime').val(); var hotspot = $('#hotspot').val(); var recommend = $('#recommend').val(); var origin = $('#origin').val(); //执行重载 table.reload('title', { page: { curr: 1 //重新从第 1 页开始 } , where: { //这里注意一定要跟Bean 里面的属性对应 title: title.val(),//赋值 manualKeyword:manualKeyword.val(), createTime:creatData, hotspot:hotspot, recommend:recommend, origin:origin } }); } };这个是搜索按钮事件， 找到你的搜索按钮 获取搜索按钮点击事件。只需要把$(’’)这里面的内容修改了就可以了。
$('.layui-form-item .layui-btn').on('click', function () { var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; });