您好,登錄后才能下訂單哦!
本文實例為大家分享了layui實現(xiàn)數(shù)據(jù)表格點擊搜索的具體代碼,供大家參考,具體內(nèi)容如下
<!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' //頁碼的參數(shù)名稱,默認:page ,limitName: 'pageSize' //每頁數(shù)據(jù)量的參數(shù)名,默認:limit ,statusName:'status'//數(shù)據(jù)狀態(tài)的字段名稱,默認:code ,statusCode:200 //成功的狀態(tài)碼,默認: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' //頁碼的參數(shù)名稱,默認:page ,limitName: 'pageSize' //每頁數(shù)據(jù)量的參數(shù)名,默認: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": "海南信息有限公司" } ] }
效果:
點擊搜索后
更多搜索功能實現(xiàn)的精彩文章,請點擊專題:javascript搜索功能匯總 進行學(xué)習(xí)
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。