Ajax request to receive data from servlet and render Layui data table
*Incoming request through ajax to the backend (DrinkServlet), when getting data from the database and sending it back to the front end. Since the initialization interface of Layui I learned before is like this
//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" //设置表格工具栏
});
*Because the data used here is a ready-made json object, the url directly takes "js/11user.json", but my project needs to take the data returned by ajax, so there is no need to adjust the url at this time, directly in the parameters Add a data and call the data passed by ajax.
*In addition, because layui has its own unique data format, the data passed by ajax must be parsed through the parseData parameter.
The js code is as follows
<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>