layui动态表格 动态查询数据
layui动态表格 动态查询数据
首先定义一个文本框和一个搜索 注意搜索按钮里的 data-type=“reload” 和input id
//定义一个表格
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: "{
{layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss')}}"}//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) : '';
});