參考Layui數(shù)據(jù)表格文檔可以看到三種layui表格渲染方式，項(xiàng)目選用第一種，采用Layui的異步數(shù)據(jù)接口方式，渲染表格并分頁(yè)。
創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)與策劃設(shè)計(jì),麥蓋提網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:麥蓋提等地區(qū)。麥蓋提做網(wǎng)站價(jià)格咨詢:028-86922220
按照官方寫法，會(huì)報(bào)跨域錯(cuò)誤，嘗試幾次，發(fā)現(xiàn)需要設(shè)置contentType。
重慶分公司
重慶分公司
//js
layui.use(['table','element'], function(){
var fhtable = layui.table;
//方法渲染表格
fhtable.render({
id: "pxjltable",//容器唯一id
elem: '#pxjltable',//原始table容器dom
method :'get',
contentType: 'jsonp',//一定要是jsonp類型
headers:{
"Token": winStorage.token
},
request: {
pageName: 'current', //頁(yè)碼的參數(shù)名稱，默認(rèn)：page
limitName: 'limit' //每頁(yè)數(shù)據(jù)量的參數(shù)名，默認(rèn)：limit
},
url: baseAjaxUrl+'/fmReviewManagementRecord/front_login/getRecordByUserId',
height: 470, //設(shè)置高度
limit: 10,
page: {layout: ['prev','page','next','count','skip']},
cols:[[
{field:'applyDate',title:'復(fù)核申請(qǐng)日期',width:131,align:'center'},
{field:'certificateLevel',title:'認(rèn)定級(jí)別',templet:'#level',width:102,align:'center'},
{field:'status',title:'狀態(tài)',templet:'#status',width:102,align:'center'},
{field:'passDateFmt',title:'審核日期',width:131,align:'center'},
{field:'status',title:'復(fù)核結(jié)果',templet:'#status1',width:105,align:'center'},
{field:'orgName',title:'復(fù)合單位',align:'center'},
{field: 'auditContents',title: '審核反饋',
templet: function(d) {
if (null == d.auditContents || d.auditContents == "") {
return '無(wú)反饋信息'
}
return '查看'
},
align: 'center'
}
]],
parseData: function(res){ //res 即為原始返回的數(shù)據(jù)
return {
"code": res.code, //解析接口狀態(tài)
"msg": res.message, //解析提示文本
"count": res.data.total, //解析數(shù)據(jù)長(zhǎng)度
"data": res.data.records //解析數(shù)據(jù)列表
};
},
response: {
statusCode: 200
},
done: function(res, curr, count) {
layer.closeAll();
}
});
//html
效果圖
以上這篇Layui 解決表格異步調(diào)用后臺(tái)分頁(yè)的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。
