layui实现数据表格点击搜索功能
时间：2021-04-29 10:56:24|栏目：JavaScript代码|点击： 次
本文实例为大家分享了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搜索功能汇总 进行学习
上一篇：JS获取input[file]的值并显示在页面的实现方法
栏 目：JavaScript代码
本文标题：layui实现数据表格点击搜索功能
本文地址：http://www.codeinn.net/misctech/111068.html
