您的位置：首页 > 产品设计 > UI/UE

layui实现数据表格点击搜索功能

2019-07-26 16:14 2907 查看

本文实例为大家分享了layui实现数据表格点击搜索的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>更正地址</title>
<style>

</style>
<link rel="stylesheet" href="layui/css/layui.css" >
<script src="js/jquery-1.11.3.min.js"></script>
<script src="layui/layui.js"></script>
</head>
<body>

<div class="demoTable">
搜索商户：
<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="tablea" lay-filter="menu-filter"></table>
<script>
layui.use('table', function() {
var table = layui.table;
//方法级渲染
table.render({
elem: '#tablea'
,url:'json/demo.json'
, cols: [[
{field:'id', title: 'ID', align: 'center',width:150}
,{field:'username', title: '公司名称', align: 'center',width:100}
]]
, id: 'testReload'
, page: true
, height: 600
,request: {
pageName: 'page' //页码的参数名称，默认：page
,limitName: 'pageSize' //每页数据量的参数名，默认：limit
,statusName:'status'//数据状态的字段名称，默认：code
,statusCode:200 //成功的状态码，默认：0
}
});
$('.layui-btn').click(function () {
var inputVal = $('.layui-input').val()
table.reload('testReload', {
url: 'https://www.easy-mock.com/mock/5c131015dada7b27ac3a5c36/titi/noData'
// ,methods:"post"
,request: {
pageName: 'page' //页码的参数名称，默认：page
,limitName: 'pageSize' //每页数据量的参数名，默认：limit
}
,where: {
query : inputVal
}
,page: {
curr: 1
}
});
})
})

</script>

</body>
</html>

2.demo.json

{
"code": "0",
"msg": "",
"count": 1,
"data": [
{"id":"1",
"username": "海南信息有限公司"

},
{"id":"2",
"username": "海南信息有限公司"

},
{"id":"3",
"username": "海南信息有限公司"

},
{"id":"4",
"username": "海南信息有限公司"

}
]
}

效果：

点击搜索后

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

基于layui实现高级搜索（筛选）功能

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： layui 数据表格搜索

相关文章推荐

新的分享

章节导航