layui动态表格 动态查询数据

layui动态表格 动态查询数据

首先定义一个文本框和一个搜索 注意搜索按钮里的 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) : '';
        });