ajax接收servlet的数据data,传入Layui的数据表格

语言: CN / TW / HK

ajax请求接收servlet的数据data,进行Layui数据表格渲染

*通过ajax传入请求到后台(DrinkServlet),从数据库拿到数据传回前端时。由于我之前学的Layui的初始化界面是这样的

		//1.方法渲染
				table.render({
   
   
					elem:"#demo",	//这个elem绑定的是容器的id,,与分页不同  这个要加井号
					url:"js/11user.json",			//数据接口,有后台写后台,这里写死一个json
					cols:[[
						{
   
   field:'aa',type:"numbers"},		//开启序列号
						{
   
   field:'bb',type:"checkbox"},		//开启复选框
						{
   
   field:'id',title:'用户编号',sort:true,width:120},	//sort排序
						{
   
   field:'username',title:'姓名',width:100},
						{
   
   field:'sex',title:'性别',width:100},
						{
   
   field:'city',title:'城市',width:100},
						{
   
   field:'sign',title:'签名'},
						{
   
   field:'操作',toolbar:"#barDemo"}		//设置头部工具栏
							
					]],
					page:true,				//开启分页
					toolbar:"#toolbarDemo"	//设置表格工具栏
				});
				

*由于这里用的数据是现成的json对象,所以url直接取的"js/11user.json",但是我这个项目要取ajax传回的数据,此时就不用再调url了,直接在参数中加一项data,调用ajax传过来的data即可。

*另外由于layui有自己独特的数据格式,ajax传过来的数据要通过parseData参数进行解析。

js代码如下

	<script type="text/javascript">
$(function(){
   
   
	
	
	
		//【展示全部信息】
		$.ajax({
   
   
				type:"post",
				dataType:"json",
				url:"DrinkServlet",
				success:function(data,status){
   
   
				var d = data;						
						
				layui.use(['form','jquery','table','layer'],function(){
   
   
						var form = layui.form;
						var $ = layui.jquery;
						var table = layui.table;
						var layer = layui.layer;
					
						table.render({
   
   
							elem:"#dataTable",
							data:d,
							cols:[[
									...
							]],
							parseData: function(d) {
   
    //res 即为原始返回的数据
					            return {
   
   
					                "code": 0, //解析接口状态
					                "msg": "", //解析提示文本
					                "count": 100, //解析数据长度
					                "data": d //解析数据列表
					            }
					        }
					   });
					});
				}
		});			
					
			
		
		
		
		
		
		
			
});				
</script>	
分享到: