layui 数据表格table使用

html:

<body>
<div class="demoTable" style='margin-top:10px;'>
	<div class="layui-inline">
		<label class="layui-form-label">月份</label>
		<div class="layui-input-inline">
		    <input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
		</div>
	</div>
	 <div class="layui-inline">
	  <label class="layui-form-label">部门</label>
	   <div class="layui-input-inline layui-form">
	    <select name="city" id="infoCode">
	      <option value="">请选择</option>
		<#if domList ??>
		     <#list domList as entity>
		     <option value="${entity.infoCode}">${entity.infoName}</option>
		</#list>
		</#if>
		</select>
	</div>
		<button class="layui-btn" data-type="reload">搜索</button>
	</div>
   </div>
	<table class="layui-hide" id="LAY_table_01"></table>
</body>

js:

    var dt_dept	 = new Date();
    var year_dept= dt_dept.getFullYear(); 
    var mon_dept = (dt_dept.getMonth()>9) ? dt_dept.getMonth()+1 : "0"+(dt_dept.getMonth()+1); 
    var itemTime_dept= year_dept+'-'+mon_dept;
$(document).ready(function(){ 
	   layui.use(['table','laydate'], function(){
			  var table = layui.table,
			      laydate = layui.laydate;
			
			  //常规用法
			  laydate.render({
			    elem: '#test1'
			    ,type: 'month'
			    ,value:itemTime_dept
				,done: function(value, date){ //监听日期被切换
					itemTime_dept = value;
				}
			  });
			  
			  //方法级渲染
			  table.render({
			    elem: '#LAY_table_01'
			    ,url: '/gcsoft/news/orginCount.action'
		       ,where: {
		        	   itemTime: itemTime_dept,
		        	   menuId:''
		         }
			    ,cols: [[
		           {field:'ORIGIN', title: '部门', width:200}
			      ,{field:'COUNT', title: '投稿量'}
			      ,{field:'YES', title: '通过'}
			      ,{field:'NO', title: '未通过'}
			    ]]
			    ,page: true
			    ,id: 'testReload'
			    ,height: 'full-124'
			  });
			  var $ = layui.$, active = {
			    reload: function(){
			      var demoReload = $('#demoReload');
			      //执行重载
			      table.reload('testReload', {
			        page: {
			          curr: 1 //重新从第 1 页开始
			        }
			        ,where: {
			        	 itemTime: itemTime_dept,
			        	 infoCode: $('#infoCode').val()
			          }
			      });
			    }
			  };
			  
			  $('.demoTable .layui-btn').on('click', function(){
			    var type = $(this).data('type');
			    active[type] ? active[type].call(this) : '';
			  });
			});   
});

java:

	@SuppressWarnings("unchecked")
	@RequestMapping(value = "/orginCount", method = { RequestMethod.GET })
	public Map orginCount(HttpServletRequest request) {
		String itemTime = request.getParameter("itemTime");
		String infoCode = request.getParameter("infoCode");
		int offset = Integer.valueOf(request.getParameter("page"));
		int pageSize = Integer.valueOf(request.getParameter("limit"));
		Map<String , String> entity = new HashMap<String, String>();
		entity.put("itemTime", itemTime);
		entity.put("infoCode",infoCode);
		Map List = new HashMap();
		List<Map<String, String>> list =siteCMenuInfoService.orginCount(entity,((offset-1)*pageSize),pageSize);
		List.put("code", "0");
		List.put("count",siteCMenuInfoService.orginCountNum(entity));
		List.put("data", list);
		List.put("msg", "");
		return List;
	}

效果：

layui 数据表格table使用

猜你喜欢