layui实现显示数据表格和搜索功能示例实现显示数据表格和搜索功能示例
主要介绍了layui实现显示数据表格和搜索功能,结合实例形式分析了layui显示数据表格和搜索功能具体界面布
局、功能实现相关操作技巧,需要的朋友可以参考下
本文实例讲述了layui实现显示数据表格和搜索功能。分享给大家供大家参考,具体如下:
<div style="text-align: center" id='btn'>
<div class="layui-inline">
<input class="layui-input" name="keyword" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="test"></table>
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'/getdata.php'
,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
//,curr: 5 //设定初始在第 5 页
,groups: 1 //只显示 1 个连续页码
,first: false //不显示首页
,last: false //不显示尾页
}
,cols: [[
{field:'id', width:80, title: 'ID', sort: true}
,{field:'columnname', width:80, title: '字段名'}
,{field:'descriptionCN', width:80, title: '中文描述', sort: true}
,{field:'name', width:80, title: '名称'}
,{field:'description_table', title: '表描述', width: '30%', minWidth: 100} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
,{field:'description', title: '字段类型', sort: true}
,{field:'primaryKey', title: '主键', sort: true}
,{field:'class', width:137, title: '分类', sort: true}
]]
});
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');
//执行重载
table.reload('test', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
keyword: demoReload.val()
}
});
}
};
$('#btn .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
引用样式和js,这是必须的。
后台返回数据格式
{
"code": 0,
"msg": "",
"count": 4,
"data:{}
}
评论0