脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → layui数据表格点击搜索

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

 更新时间：2020年03月26日 16:27:29   作者：九亿宅男的梦  
这篇文章主要为大家详细介绍了layui实现数据表格点击搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

 }
 ]
}

效果：

点击搜索后

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

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

您可能感兴趣的文章:

相关文章

  • javascript和jQuery实现网页实时聊天的ajax长轮询

    javascript和jQuery实现网页实时聊天的ajax长轮询

    在做网页实时聊天的时候常常需要长轮询，本文由于采用原生的JS及AJAX，所以简单易懂，通过这篇文章就可以建立一个简单的聊天室程序。
    2016-07-07
  • bootstrap模态框垂直居中效果

    bootstrap模态框垂直居中效果

    这篇文章主要为大家详细介绍了bootstrap模态框垂直居中效果的实现代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • js以及jquery实现手风琴效果

    js以及jquery实现手风琴效果

    这篇文章主要为大家详细介绍了js版本实现手风琴效果和jquery版本实现的手风琴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • javascript 24点游戏代码

    javascript 24点游戏代码

    非常不错的技术24点的游戏代码，他的算法值得学习，希望喜欢游戏的朋友，可以来看看
    2008-06-06
  • Bootstrap常用组件学习(整理)

    Bootstrap常用组件学习(整理)

    这篇文章是小编日常收集整理的有关bootstrap 常用组件包括Bootstrap 面板（Panels），Bootstrap 多媒体对象（Media Object）知识，非常不错，需要的朋友参考下吧
    2017-03-03
  • 把json格式的字符串转换成javascript对象或数组的方法总结

    把json格式的字符串转换成javascript对象或数组的方法总结

    下面小编就为大家带来一篇把json格式的字符串转换成javascript对象或数组的方法总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • JS实现排行榜文字向上滚动轮播效果

    JS实现排行榜文字向上滚动轮播效果

    这篇文章主要为大家详细介绍了JS实现排行榜文字向上滚动轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11
  • echarts大屏字体自适应的方法步骤

    echarts大屏字体自适应的方法步骤

    这篇文章主要介绍了echarts大屏字体自适应的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • 浅析JS中的原型,原型链和继承

    浅析JS中的原型,原型链和继承

    经典模式和圣杯模式都是用于解决构造函数继承和原型继承的问题,但它们在实现继承的方式上有所不同,本文主要来和大家聊聊经典模式和圣杯模式下原型,原型链和继承的实现,需要的可以参考下
    2023-09-09
  • javascript将扁平的数据转为树形结构的高效率算法

    javascript将扁平的数据转为树形结构的高效率算法

    这篇文章主要介绍了javascript将扁平的数据转为树形结构的高效率算法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02

最新评论