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": "海南信息有限公司"

 }
 ]
}

效果：

点击搜索后

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

赞 (0)

相关推荐

  • 基于layui实现高级搜索（筛选）功能

    基于layui实现高级搜索（筛选）功能

    基于layui写的一个高级搜索(筛选)功能. 效果图: 是一位萌新,所有写的有点儿乱.(放在上面,供新手们参考,也是自己做一个记录.) 代码如下: <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <base href="<%=basePath%>" rel="external

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

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

    本文实例为大家分享了layui实现数据表格点击搜索的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>更正地址</title> <style> </style> <link rel="stylesheet" href=&q

  • layui的数据表格+springmvc实现搜索功能的例子

    如下所示: 主要在前端页面加: <div class="demoTable"> 搜索ID: <div class="layui-inline"> <input class="layui-input" name="keyWord" id="keyWord" autocomplete="off"> </div> <span class=&

  • layui使用数据表格实现购物车功能

    本文实例为大家分享了layui使用数据表格实现购物车功能的具体代码,供大家参考,具体内容如下 html部分 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>layui数据表格实现类购物车功能</title> <link rel="stylesheet" type="

  • layui实现数据表格table分页功能（ajax异步）

    layui实现数据表格table分页功能（ajax异步）

    layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询. 一.引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css" rel="external nofollow" > <script src="${ctxPath}/vender/layui/layui.js" charset=&quo

  • layui 数据表格 点击分页按钮 监听事件的实例

    找了 很多 关于表格分页 点击事件 请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起 (我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法) 先上图 代码 .html <div> <table class="layui-hide" id="test" lay-filter="demo"></table>

  • Layui给数据表格动态添加一行并跳转到添加行所在页的方法

    Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现. 笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格最后动态添加一行.上述功能官方并没有给出实现,需要自己手动解决. 解决思路及方案 简单分析:根据需求--动态添加一行,首先想到的是利用JS/jQuery操作DOM对象实现在数据表格table中手动添加一个tr,但由于数据表格的每一行的每一个单元格都有其样式,因此,要想动态添加的一行与Layui数据表格渲染出来的每一行

  • layui实现数据表格自定义数据项

    layui是一个很适合后台开发人员用的一个前端框架,界面简洁,功能丰富. 大家知道,系统一般都有数据表格及分页功能,尤其在后台管理系统之类,这类场景更是很多,layui也为我们提供了对应的支持,我这里要说的是,layui对异步返回的数据默认是有一套格式的,像下面这样 { code: 0, msg: "", count: 1000, data: [] } 字段的别名我们可以通过属性去配置,详情请参考layui官方文档 重点来啦,layui默认支持一级数据结果,像下面这种服务端返回的数据结

  • Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法

    如下所示: var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '<%=path%>/partyMember/getPartyMembersByOrgCode', //width : 1500, height : 'full', cols : [ [ //标题栏 {checkbox : true,LAY_CHECKED : false,filter : 'test'},

  • 转换layUI的数据表格中的日期格式方法

    转换layUI的数据表格中的日期格式 前端jsp代码 <table class="layui-table" style="width:100%" lay-data="{url:'/why123/user/findUserAll?userType=0', page:true, id:'idTest'}" lay-filter="demo"> <thead> <tr> <th lay-da

  • layui之数据表格--与后台交互获取数据的方法

    jsp或html <table id="userList" lay-filter="userList"></table> js //用户列表 var tableIns = table.render({ elem: '#userList', url : 'userAction_findAll.action', cellMinWidth : 95, page : true, height : "full-125", limit

随机推荐