本文实例为大家分享了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\": \"海南信息有限公司\"
}
]
}
效果：
点击搜索后
更多搜索功能实现的精彩文章，请点击专题：javascript搜索功能汇总 进行学习
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容