layui数据表格点击搜索

最新推荐文章于 2024-04-23 09:49:03 发布

前端路上迷茫的小鲨鱼

最新推荐文章于 2024-04-23 09:49:03 发布

阅读量2k

点赞数 1

分类专栏： layui

本文链接：https://blog.csdn.net/Guoyu1_/article/details/90236199

版权

layui 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

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

    }
  ]
}

效果：

点击搜索后

前端路上迷茫的小鲨鱼

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
layui数据表格点击搜索

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>更正地址</title> <style> </style> <link rel="stylesheet" href...
复制链接

扫一扫