ajax接收servlet的数据data,传入Layui的数据表格
ajax请求接收servlet的数据data,进行Layui数据表格渲染*通过ajax传入请求到后台(DrinkServlet),从数据库拿到数据传回前端时。由于我之前学的Layui的初始化界面是这样的//1.方法渲染table.render({elem:"#demo",//这个elem绑定的是容器的id,,与分页不同这个要加井号url:"js/11user.json",//数据接口,有后台写后台
·
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>
更多推荐
已为社区贡献1条内容
所有评论(0)