layui实现数据表格点击搜索功能
编程学习 2021-07-04 15:51www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了layui实现数据表格点击搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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": "海南信息有限公司"
}
]
}
效果：
点击搜索后
更多搜索功能实现的精彩文章，请点击专题： 进行学习
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。