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

不点 阅读:338 2021-03-31 13:45:53 评论:0

效果展示:

 

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

 

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号