下午好🌅🌅🌅
本答案参考ChatGPT-3.5
在Thymeleaf中处理多个选项卡的分页可以通过以下步骤实现：
-
在后端控制器中，根据选项卡的不同状态查询对应的数据，并使用Thymeleaf将数据传递给前端页面。
-
在前端页面中，定义不同选项卡对应的区域，并在每个区域中添加对应的分页数据。
-
使用JavaScript或jQuery监听选项卡的点击事件，在点击选项卡时将对应的分页数据加载到页面中。
解决方案如下：
- 后端控制器中修改代码：
@GetMapping("/ByStatelist/{state}")
public String aaa(ModelMap mmap, @PathVariable String state, @RequestParam(defaultValue = "1") int pageNum,
@RequestParam(defaultValue = "1") int pageSize) {
try {
BusinessProject businessProject = new BusinessProject();
businessProject.setState(state);
// 分页查询，设置分页参数
PageHelper.startPage(pageNum, pageSize);
List list = businessProjectService.selectBusinessProjectList(businessProject);
PageInfo pageInfo = new PageInfo<>(list);
// 根据选项卡的不同状态将数据存放到对应的Map中
if (businessProject.getState().equals("0")) {
mmap.put("Projectslist0", list);
mmap.put("pageInfo0", pageInfo);
return "project::main-content0";
} else if (businessProject.getState().equals("1")) {
mmap.put("Projectslist1", list);
mmap.put("pageInfo1", pageInfo);
return "project::main-content1";
} else if (businessProject.getState().equals("2")) {
mmap.put("Projectslist2", list);
mmap.put("pageInfo2", pageInfo);
return "project::main-content2";
} else if (businessProject.getState().equals("3")) {
mmap.put("Projectslist3", list);
mmap.put("pageInfo3", pageInfo);
return "project::main-content3";
}
return "评审项目,局部刷新数据错误,!";
} catch (Exception e) {
throw new RuntimeException(e);
}
}
- 前端页面中修改代码：
- 添加JavaScript函数：
function viewBystate(state) {
$.ajax({
url: "/ByStatelist/" + state,
success: function (data) {
$("#main-content" + state).html(data);
// 加载对应选项卡的分页数据
$("#main-content" + state).append($("#pagination" + state).html());
},
error: function (xhr, textStatus, errorThrown) {
console.log(textStatus);
}
});
}
在以上代码中，通过监听选项卡的点击事件，调用viewBystate函数发送异步请求，后端返回对应的分页数据，并将数据加载到对应的选项卡区域中，实现了选项卡的分页刷新。
需要注意的是，需要在后端模板文件中添加分页数据的片段，以便在前端动态加载分页数据。修改片段的方式为在分页数据的HTML代码上添加th:fragment指定片段的名字，并在对应选项卡区域中引用该片段。
希望以上解决方案能够帮助到你，如果还有其他问题，请随时提问。
