一招解决layui表格数据传空问题，新手小白也能快速掌握！

前端

2023-03-12 22:29:45

如何修复 LayUI 表格数据传递为空的常见问题

问题

LayUI 表格是一个功能强大的组件，用于创建交互式数据表格。但是，当通过 AJAX 异步加载数据时，经常会出现一个问题：数据为空。

原因分析：

这个问题源于 LayUI 表格使用 data 参数来传递数据，而 AJAX 请求将以前的值覆盖为 null。为了避免这种情况，我们应该使用 where 参数，它专门用于 AJAX 传输。

解决方案：

要解决此问题，只需将 data 参数替换为 where 参数即可。以下步骤介绍了如何实现：

更改表实例中的参数：

table.render({
  // ...其他选项，
  where: {
    id: 1,
    name: 'John Doe'
  }
});

获取传递的数据：
在后端代码中，使用 request.getParameter() 获取传递的数据，如下所示：

@GetMapping("/data/list")
public List<User> list(@RequestParam("id") Integer id, @RequestParam("name") String name) {
  // ...查询数据库或其他数据源
}

示例代码：

前端（LayUI）：

layui.use(['table'], function() {
  var table = layui.table;

  table.render({
    elem: '#test-table',
    url: '/data/list',
    where: {
      id: 1,
      name: 'John Doe'
    },
    cols: [[
      {field: 'id', title: 'ID'},
      {field: 'name', title: 'Name'}
    ]]
  });
});

后端（Java）：

@RestController
@RequestMapping("/data")
public class DataController {

  @GetMapping("/list")
  public List<User> list(@RequestParam("id") Integer id, @RequestParam("name") String name) {
    // ...查询数据库或其他数据源
  }
}