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