前端数据交互|表格渲染：layui实现后端数据获取与展示的方法

前端数据交互 | 表格渲染：用Layui轻松实现后端数据获取与展示 🚀

📌 场景引入

想象一下，你作为前端开发者，需要为公司的后台管理系统实现一个用户列表展示功能，后端已经提供了API接口，但如何用Layui快速将数据渲染成漂亮的表格，并且支持分页、搜索呢？别担心,本文将带你一步步搞定！

🧩 Layui表格组件的核心优势

Layui的表格组件是企业级后台系统的宠儿,因为它：

• 🔧 零配置：三行代码就能渲染基础表格
• 📡 自动分页：对接后端分页接口无需手动计算
• 🎨 高颜值：内置Layui经典样式，支持自定义皮肤
• ⚡ 响应式：手机端自动适配，数据一目了然

🚀 5步实现数据交互全流程

1️⃣ 引入Layui资源

在HTML头部添加以下代码（CDN加速版）：

<link rel="stylesheet" href="https://cdn.layui.com/2.8.3/css/layui.css">
<script src="https://cdn.layui.com/2.8.3/layui.js"></script>

2️⃣ 初始化表格容器

在页面中放置一个<table>标签,并指定ID：

<table id="userList" lay-filter="userList"></table>

3️⃣ 配置表格参数（核心！）

通过JavaScript初始化表格,关键参数解析：

layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#userList',
    url: '/api/user/list', // 后端接口地址
    method: 'post',
    where: { // 额外请求参数
      pageSize: 10,
      currentPage: 1
    },
    cols: [[
      {type: 'checkbox', fixed: 'left'},
      {field: 'id', title: 'ID', width: 80, sort: true},
      {field: 'username', title: '用户名', minWidth: 120},
      {field: 'email', title: '邮箱', minWidth: 180},
      {field: 'createTime', title: '注册时间', templet: '<div>{{layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss")}}</div>'}
    ]],
    page: true, // 开启分页
    limit: 10,
    limits: [10, 20, 30],
    text: {
      none: '暂无相关数据' // 空数据提示
    }
  });
});

4️⃣ 后端接口规范（Java示例）

确保后端返回的数据格式与Layui兼容：

@PostMapping("/api/user/list")
public Map<String, Object> listUsers(
  @RequestParam("page") int page,
  @RequestParam("limit") int limit) {
  List<User> data = userService.getPaginatedUsers(page, limit);
  int total = userService.getTotalCount();
  Map<String, Object> res = new HashMap<>();
  res.put("code", 0); // Layui规定状态码0表示成功
  res.put("msg", "");
  res.put("count", total);
  res.put("data", data);
  return res;
}

5️⃣ 添加交互功能（搜索/重载）

在页面顶部添加搜索表单：

<div class="layui-form">
  <input type="text" id="username" placeholder="输入用户名搜索" class="layui-input">
  button class="layui-btn" onclick="reloadTable()">搜索</button>
</div>
<script>
function reloadTable() {
  table.reload('userList', {
    where: {
      username: document.getElementById('username').value
    },
    page: {curr: 1} // 从第一页开始
  });
}
</script>

💡 高级技巧

🔧 自定义列模板

用templet渲染复杂内容：

{field: 'status', title: '状态', 
 templet: function(d){
   return d.status === 1 ? 
     '<span class="layui-badge layui-bg-green">正常</span>' : 
     '<span class="layui-badge">禁用</span>';
 }}

📤 导出数据为Excel

结合layer和laytpl实现导出：

// 导出按钮点击事件
$('#exportBtn').click(function(){
  layer.confirm('确认导出当前数据？', function(index){
    window.open('/api/user/export?page='+page+'&limit='+limit);
    layer.close(index);
  });
});

🔄 跨域请求配置

如果前后端分离部署，后端需添加CORS支持（Spring Boot示例）：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
      .allowedOrigins("http://前端域名")
      .allowedMethods("*")
      .allowCredentials(true);
  }
}

📌 常见问题

Q1：表格加载时提示"Loading..."但无数据？
A：检查后端返回的code是否为0，数据字段是否为data，总条数字段是否为count。

Q2：分页按钮不显示？
A：确保page: true且后端返回的count值正确。

Q3：时间格式化无效？
A：确认已引入layui.util模块，并在templet中使用layui.util.toDateString()。

通过Layui的表格组件，前端开发者可以快速对接后端数据,无需复杂配置即可实现：

• ✅ 动态数据渲染
• ✅ 分页与排序
• ✅ 自定义列样式
• ✅ 搜索与重载
• ✅ 跨域请求支持

赶紧动手试试，让你的后台系统数据展示焕然一新吧！ 💪