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


Posted in Javascript onMarch 26, 2020

本文实例为大家分享了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": "海南信息有限公司"

 }
 ]
}

效果:

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

点击搜索后

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的日期选择控件
Oct 27 Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
jquery 插件开发备注
Aug 27 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
微信小程序wxs实现吸顶效果
Jan 08 Javascript
vue eslint简要配置教程详解
Jul 26 #Javascript
vue移动端城市三级联动组件使用详解
Jul 26 #Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 #Javascript
layui实现下拉框三级联动
Jul 26 #Javascript
layui添加动态菜单与选项卡
Jul 26 #Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 #Javascript
javascript中的闭包概念与用法实践分析
Jul 26 #Javascript
You might like
php使用base64加密解密图片示例分享
2014/01/20 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
javascript删除字符串最后一个字符
2014/01/14 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
打开电脑上的QQ的python代码
2013/02/10 Python
python实现基本进制转换的方法
2015/07/11 Python
Python 爬虫图片简单实现
2017/06/01 Python
彻底搞懂Python字符编码
2018/01/23 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
Python2与Python3的区别实例总结
2019/04/17 Python
如何基于python实现脚本加密
2019/12/28 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
会计实习期自我鉴定
2013/10/06 职场文书
秘书岗位职责
2013/11/18 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
大专毕业生求职信
2014/07/05 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL