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

时间：2021-05-26

本文实例为大家分享了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:///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搜索功能汇总 进行学习

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章