layui 数据表格使用

layui 数据表格

jsp页面

<div class="layui-row" style="padding-top: 10px;">
	<table id="litigationTab" lay-filter="litigationTab"></table>
</div>
<script type="text/html" id="zizeng">
        {{d.LAY_TABLE_INDEX+1}}
</script>
<script type="text/html" id="barDemo">	
  	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="flow">跟进</a>
</script>

js

/**
 * 案件诉讼查询
 */
function search(){
	var proNum = $("#proNum").val().replace(/\s*/g,"");
	var proName = $("#proName").val().replace(/\s*/g,"");
	var target = $("#target").val().replace(/\s*/g,"");
	var status = '';
//	$("#status").val();
	layui.use('table', function(){
		  table = layui.table;
		  table.render({
		    elem: '#litigationTab'
		    ,id:"subCost"
		    ,url:'/ServiceAction/com.velcro.litigation.servlet.LitigationAction?action=queryLitigationsnew'
		    ,where: {proNum: proNum, proName: proName,target:target,status:status}
		    ,cols: [[
		      {field:'zizeng', width:80, title: '序号',fixed: 'left',type:'numbers',align:'center'},
		      {field:'exttextfield2', minWidth:130, title: '项目编号', fixed: 'left',align:'center'},
		      {field:'objname', minWidth:200, title: '项目名称', fixed: 'left',align:'center'},
		      {field:'projectno', width:130, title: '合同甲方', fixed: 'left',align:'center'},
		      {field:'projectname', width:130, title: '最终用户', fixed: 'left',align:'center'},
		      {field:'litigation_status', width:120, title: '诉讼状态', fixed: 'left',align:'center'},
		      {field:'frist_court', width:260, title: '一审开庭法院',align:'center'},
		      {field:'litigation_first_status', width:120, title: '一审案件状态',align:'center'},
		      {field:'second_court', width:120, title: '二审开庭法院',align:'center'},
		      {field:'litigation_second_status', width:120, title: '二审案件状态',align:'center'},
		      {field:'operation', width:120, title: '操作',align:'center',toolbar: '#barDemo'}
		    ]]
		  ,page: true 
		  ,text:'案件诉讼'
		  ,loading:true
		  ,size: 'sm'
		  ,limit:20
//		  ,limits:[30,60,90]
		  });
		});
	
	//监听行工具事件
	  table.on('tool(litigationTab)', function(obj){
	    var data = obj.data;
//	    console.log(obj)
	    if(obj.event === 'flow'){
	    	var id = data.id; 
	    	window.location = '/litigation/nextWork.jsp?id='+id;
	    } else if(obj.event === 'edit'){
	    	var id = data.id; 
	    	window.location = '/litigation/createLitigation.jsp?id='+id;
	    }
	});
}

action  这里layui 会自动将分页相关参数传过来

/**
	 * 查询案件诉讼
	 * @param request
	 * @param response
	 * @throws IOException 
	 */
	private void queryLitigationsNew(HttpServletRequest request, HttpServletResponse response) throws IOException {
		String proNum = request.getParameter("proNum");
		String proName = request.getParameter("proName");
		String target = request.getParameter("target");
		String status = request.getParameter("status");
		String page = request.getParameter("page");
		String limit = request.getParameter("limit");
		Map<String,String> map = new HashMap<String,String>();
		map.put("proNum", proNum );
		map.put("proName", proName );
		map.put("target", target );
		map.put("status", status );
		map.put("page", page);
		map.put("limit", limit);
		Map litigationsList =  litigationServiceImpl.queryLitigations(map);
		ReceivableUtils.flushData(request, response, JSONValue.toJSONString(litigationsList));
	}

最终展示