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', {
   // ,methods:"post"
   ,request: {
    pageName: 'page' //頁碼的參數名稱,默認:page
    ,limitName: 'pageSize' //每頁數據量的參數名,默認:limit
   }
   ,where: {
    query : inputVal
   }
   ,page: {
    curr: 1
   }
   });
  })
  })
 
</ script >
 
 
</ body >
</ html >


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM