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) : ''; 
  });