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

本文实例为大家分享了获得实现数据表格点击搜索的具体代码，供大家参考，具体内容如下

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题更正地址/title style /style link rel='样式表href=' layui/CSS/layui。CSS ' script src=' http : js/jquery-1。11 .3 .量滴js '/script script src=' http : layui/layui。js '/script/headdydiv class=' Demoable '搜索商户：div class=' layui-inline ' input class=' layui-input ' name=' keyword ' id=' demoReload ' autocomplete=' off '/div button class=' layui-BTN '数据类型=' reload '搜索/button/div table class=' layui-hide ' id=' tablea ' lay-filter=' menu-filter '/tablescript layui。使用(' table '，function(){ var table=layui。桌子；//方法级渲染桌子。render({ elem : ' # tablea '，url:'json/demo.json '，cols :[{ field : ' ID '，title: 'ID '，align: 'center '，width:150}，{field:'username '，title: '公司名称，对齐： '中心，宽度：100} ]，id: 'testReload '，页面：真的，高度： 600,请求： {页面名称： '页面'//页码的参数名称，默认：页面，限制名称： '页面大小'//每页数据量的参数名，默认：限制，状态："状态"//数据状态的字段名称，默认：代码，statusCode:200 //成功的状态码，默认：0 } });$('.拉伊-BTN ' .单击(函数(){ var inputVal=$(').layui-input ').val()。桌子。reload(' TestReload '，{ URL : ' https://www。简单的模仿。com/mock/5c 131015 da 7 b 27 AC 3a 5 c 36/titi/no data '、methods:'post '、request : { page name : ' page '//页码的参数名称，默认：页面，限制名称： '页面大小'//每页数据量的参数名，默认：limit }，其中： { query : inputVal }，第：页{ curr : 1 } })；})})/脚本/正文/html 2。演示。数据

{ 'code': '0 '，' msg': ' '，' count': 1，' data': [ {'id':'1 '，' username': '海南信息有限公司}，{"id":"2 "，"用户名":海南信息有限公司}，{"id":"3 "，"用户名":海南信息有限公司}，{"id":"4 "，"用户名":海南信息有限公司' } ]}效果：

点击搜索后

更多搜索功能实现的精彩文章，请点击专题：javascript搜索功能汇总进行学习

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