山东11选5计划软件

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

 更新时间:2019年07月26日 16:14:24   山东11选5:九亿宅男的梦   我要评论

这篇文章主要为大家详细介绍了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: 'http://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": "海南信息有限公司"

 }
 ]
}

效果:

点击搜索后

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持山东11选5计划软件。

相关文章

  • js跨域问题浅析及解决方法优缺点对比

    js跨域问题浅析及解决方法优缺点对比

    所谓js跨域问题,是指在一个域下的页面中通过js访问另一个不同域下 的数据对象,出于安全性考 虑,几乎所有浏览器都不允许这种跨域访问,这就导致在一些ajax应用中,使用跨域的web service会成为一个问题。 要解决跨域的问题,就是本文我们需要探讨的了
    2014-11-11
  • Webpack中css-loader和less-loader的使用教程

    Webpack中css-loader和less-loader的使用教程

    这篇文章主要介绍了关于Webpack中css-loader和less-loader的使用教程,文中通过示例代码介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-04-04
  • 使用JS+XML(数据岛)实现分页)

    使用JS+XML(数据岛)实现分页)

    使用JS+XML(数据岛)实现分页)...
    2007-01-01
  • 基于Phantomjs生成PDF的实现方法

    基于Phantomjs生成PDF的实现方法

    这篇文章主要介绍了基于Phantomjs生成PDF的实现方法,结合实例形式分析了Phantomjs结合nodejs生成pdf的操作步骤与相关技巧,需要的朋友可以参考下
    2016-11-11
  • 详解js几个绕不开的事件兼容写法

    详解js几个绕不开的事件兼容写法

    本篇文章主要介绍了详解js几个绕不开的事件兼容写法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JS实现星星评分功能实例代码(两种方法)

    JS实现星星评分功能实例代码(两种方法)

    这篇文章主要介绍了JS实现星星评分功能实例代码(两种方法)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • javascript判断css3动画结束 css3动画结束的回调函数

    javascript判断css3动画结束 css3动画结束的回调函数

    本文主要给大家介绍的是如何使用javascript判断CSS3动画效果结束,主要是使用了javascript的回调函数,其思路是一旦动画或变换结束,回调函数就会触发。不再需要大型类库支持,非常的简单实用,推荐给大家。
    2015-03-03
  • js实现年月日表单三级联动

    js实现年月日表单三级联动

    这篇文章主要为大家详细介绍了js实现年月日表单三级联动,生日栏表单三级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • canvas实现弧形可拖动进度条效果

    canvas实现弧形可拖动进度条效果

    本篇文章主要介绍了canvas实现弧形可拖动进度条的实例方法,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-05-05
  • js猜数字小游戏的简单实现代码

    js猜数字小游戏的简单实现代码

    这篇文章介绍了js猜数字小游戏的简单实现代码,很好玩的游戏哦,可以看看你的智商 是否惊人额
    2013-07-07

最新评论

众盈彩票网址 - 杭可科技 新生彩票娱乐平台网址 好乐多彩票平台网址 - 长乐市工艺美术协会