本文实例为大家分享了layui实现数据表格点击搜索的具体代码,供大家参考,具体内容如下
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>更正地址& lt;/title>
& lt; style>
& lt;/style>
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/layui/css/layui.css "比;
& lt;脚本src=" https://www.yisu.com/zixun/js/jquery-1.11.3.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/layui/layui.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div类=癲emoTable”比;
搜索商户:
& lt; div类=發ayui-inline”比;
& lt;输入类=" layui-input " name="关键字" id=癲emoReload”自动完成=肮乇铡北?
& lt;/div>
& lt;按钮类=發ayui-btn”数据类型=爸卦亍钡脑谒阉? lt;/button>
& lt;/div>
& lt;表类=" layui-hide " id="为多" lay-filter=癿enu-filter祝辞& lt;/table>
& lt; script>
layui。使用(“表”,函数(){
var表=layui.table;//方法级渲染
table.render ({
为多elem:“#”
url:“json/demo.json '
关口:[[
{字段:“id”,标题:“id”,对齐:“中心”,宽度:150}
,{字段:“用户名”,标题:“公司名称”,对齐:“中心”,宽度:100}
]]
id:“testReload”
、页面:真
、身高:600
要求:{
pageName:“页面”//页码的参数名称,默认:页面
limitName:“页大小的//每页数据量的参数名,默认:极限
statusName:“地位”//数据状态的字段名称,默认:代码
statusCode: 200//成功的状态码,默认:0
}
});
$ (' .layui-btn ')。点击(函数(){
var inputVal=$ (' .layui-input ') .val ()
表格重载(testReload, {
url: https://www.easy-mock.com/mock/5c131015dada7b27ac3a5c36/titi/noData的//方法:“文章”
要求:{
pageName:“页面”//页码的参数名称,默认:页面
limitName:“页大小的//每页数据量的参数名,默认:极限
}
,地点:{
查询:inputVal
}
页面:{
咕咕叫:1
}
});
}）
}）
& lt;/script>
& lt;/body>
& lt;/html>
2. demo.json
{
“代码”:“0”,
:“味精”,
“数”:1、
“数据”:(
{" id ": " 1 ",
“用户名”:“海南信息有限公司”
}，
{" id ": " 2 ",
“用户名”:“海南信息有限公司”
}，
{" id ":“3”,
“用户名”:“海南信息有限公司”
}，
{" id ":“4”,
“用户名”:“海南信息有限公司”
}
]
}
效果:
点击搜索后
更多搜索功能实现的精彩文章,请点击专题:javascript搜索功能汇总进行学习
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
