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 each函数的链式调用
Jul 22 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 Javascript
BootStrap3学习笔记(一)之网格系统
May 20 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
js实现淘宝首页的banner栏效果
Nov 26 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
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 strtotime函数详解
2009/12/18 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
python删除过期log文件操作实例解析
2018/01/31 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
《小池塘》教学反思
2014/02/28 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电