SpringBoot +Thymeleaf + LayUI 实现table 检索功能

效果展示：

 

HTML 代码：

       <div>
  			搜索：
  			<div class="layui-inline">
    			<input class="layui-input" name="id" id="demoReload" autocomplete="off">
  			</div>
  			<button class="layui-btn" data-type="reload" id="searchTransport">搜索</button>
		</div>
    	
    	<table id="transport" lay-filter="transport"></table>

JS 代码：

table 表格渲染：

// table 表格数据渲染
  table.render({
	    elem: '#transport'
	    ,height: 312
	    ,url: '/api/transport/find' 
	    ,where: {deliveryName: '', deliveryCode: ''}
	    ,page: true //开启分页
	    ,cols: [[ //表头
	      {field: 'id', title: 'ID', sort: true, fixed: 'left'}
	      ,{field: 'deliveryName', title: '物流公司名称', }
	      ,{field: 'deliveryCode', title: '物流公司编码', }
	      ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
	    ]]
	  });

table 重新加载

 // 数据重新渲染
  var active ={
		  reload: function(){
		      var demoReload = $('#demoReload');
		      
		      //执行重载
		      table.reload('transport', {
		        page: {
		          curr: 1 //重新从第 1 页开始
		        }
		        ,where: {
		        	deliveryName: demoReload.val(),
		        	deliveryCode: ''
		        }
		      }, 'data');
		    }
	  
		  
  };

 // table 绑定检索事件
  $('#searchTransport').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });