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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/246860.html
標籤：其他