本文介绍了如何使用Layui的Table组件实现从服务端加载数据的功能。通过JavaScript初始化表格并配置URL、参数及分页选项，结合JSP中的HTML结构定义，展示了完整的前后端交互方案。代码涵盖了表头定义、工具栏绑定及分页设置，适用于需要动态展示列表数据的Web应用开发场景。
JavaScript初始化与配置
首先，在JavaScript中引入Layui模块并初始化表格。通过layui.use加载table和form模块，获取jQuery和table对象实例，随后调用initTable函数执行渲染逻辑。
layui.use(['table','form'], function() {
$ = layui.jquery;
table = layui.table;
tableIns = initTable();
});
//加载列表
function initTable(){
// 执行渲染
tableIns = table.render({
id: 'idTest',
elem : '#deviceTable', // 指定原始表格元素选择器（推荐id选择器）
size: 'lg',
height : 'full-20', // 容器高度
url : '/csCloud-admin/deviceController/getDeviceList.do',
where: {
'orgId':$("#orgId").val(),
'coldNum':$("#coldNum").val(),
'devType':$("#devType").val(),
'isUsed':$("#isUsedId").val()
},
method : 'post',
cols : [ [ // 标题栏
{
field : 'rownum',
title : '序号',
width : 100,
sort : true
}, {
field : 'devNum',
title : '设备编号',
width : 200
}, {
field : 'devAlias',
title : '设备别名',
width : 100
}, {
field : 'devTypeVal',
title : '设备类型',
width : 100
}, {
field : 'devModel',
title : '设备型号',
width : 100
}, {
field : 'stateVal',
title : '设备状态',
width : 100
}, {
field : 'coldNum',
title : '冷库编号',
width : 100
}, {
field : 'orgName',
title : '所属机构',
width : 300
}, {
field : 'isUsedValue',
title : '状态',
width : 100
}, {
fixed : 'right',
width : 300,
align:'center',
toolbar : '#barDemo'
}
] ], // 设置表头
page : true,
limits : [ 10,30, 60, 90, 150, 300 ],
limit : 10
});
return tableIns;
}
JSP页面结构定义
在JSP页面中，使用Layui的栅格系统构建HTML结构。创建一个包含id为deviceTable的table元素，作为表格渲染的目标容器，确保页面布局符合Layui的样式规范。
<div class="layui-fluid">
<div class="layui-row">
<div class="layui-col-lg12">
<table id="deviceTable"></table>
</div>
</div>
</div>
以上即为Layui实现Table数据加载的完整示例代码。该方案提供了前端配置与后端接口对接的参考，希望能为开发者提供有价值的借鉴，同时也欢迎大家继续支持本站获取更多技术分享。