以下是一个基于 Spring MVC 和
layui 数据表格的 AJAX
表格查询实现的示例：
1. 首先，定义一个包含
搜索条件的实体类：
```
public class SearchParam {
private String name;
private Integer age;
// 省略 getter 和 setter 方法
}
```
2. 在控制器中定义处理 AJAX 请求的方法：
```
@Controller
@RequestMapping("/user")
public class UserController {
@RequestMapping("/search")
@ResponseBody
public Map<String, Object> search(@RequestParam("page") Integer page,
@RequestParam("limit") Integer limit,
SearchParam searchParam) {
// 处理
查询逻辑，根据
搜索条件查询数据并返回
Map<String, Object> result = new HashMap<>();
//
查询总记录数
int count = userService.getCountBySearchParam(searchParam);
//
查询当前页
数据
List<User> userList = userService.getListBySearchParam(searchParam, page, limit);
result.put("code", 0);
result.put("msg", "");
result.put("count", count);
result.put("data", userList);
return result;
}
}
```
3. 在
页面中使用
layui 数据表格，并编写 AJAX 请求：
```
<script>
layui.use('table', function () {
var table =
layui.table;
table.render({
elem: '#userTable', // 指定原始
表格元素选择器（如：#id、.class）
url: '/user/search', // AJAX 请求的 URL
method: 'post', // 请求方式
page: true, // 开启分页
cols: [[
{field: 'id', title: 'ID', sort: true},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄', sort: true}
]]
});
// 监听
搜索按钮点击事件
$('#searchBtn').on('click', function () {
// 执行
搜索操作
table.reload('userTable', {
where: {
name: $('#name').val(),
age: $('#age').val()
}
});
});
});
</script>
```
4. 在
页面中添加
搜索条件输入框和
搜索按钮：
```
<div class="
layui-form-item">
<div class="
layui-inline">
<label class="
layui-form-label">姓名</label>
<div class="
layui-input-inline">
<input id="name" class="
layui-input" type="text" placeholder="请输入姓名">
</div>
</div>
<div class="
layui-inline">
<label class="
layui-form-label">年龄</label>
<div class="
layui-input-inline">
<input id="age" class="
layui-input" type="text" placeholder="请输入年龄">
</div>
</div>
<div class="
layui-inline">
<button id="searchBtn" class="
layui-btn">
搜索</button>
</div>
</div>
```
以上就是一个基于 Spring MVC 和
layui 数据表格的 AJAX
表格查询实现的示例，具体
实现方式可能会因项目需求而有所不同，可根据个人需求进行调整。
最低0.47元/天 解锁文章
3898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
