thymeleaf 选项卡如何分页
问题1：多个选项卡，然后每个选项卡都有列表要分页，我在下面加了统一的分页，但是分页数据根据每次点击的不同选项卡数据会变动，局部刷新
return "project::main-content0";只能定位列表元素局部刷新，无法定位分页数据刷新，我还不想再写一个方法，感觉一个方法能解决，但是自己又没啥思路，希望老司机指导下思路，邮箱757720404@qq.com。 详情看后端分页查询数据，“//重点 ：project html页面名称” 这里
后端
/**
* 跳转评审管理查询页面，默认查询状态为0的草稿数据（加载页面没有任何问题）
* @return
*/
@RequiresPermissions("system:project:view")
@GetMapping()
public String project(ModelMap mmap, @RequestParam(defaultValue = "1") int pageNum,
@RequestParam(defaultValue = "1") int pageSize)
{
//查询状态为0的全部项目
try {
BusinessProject businessProject = new BusinessProject();
businessProject.setState("0");
PageHelper.startPage(pageNum,pageSize);//关键
List<BusinessProject> businessProjects = businessProjectService.selectBusinessProjectList(businessProject);
log.info("查询状态为0的全部项目businessProjects："+businessProjects);
mmap.put("Projectslist0",businessProjects);
PageInfo<BusinessProject> pageInfo = new PageInfo<>(businessProjects);
mmap.put("pageInfo0",pageInfo);
System.out.println("查询0分页实体类: "+pageInfo.toString());
} catch (Exception e) {
throw new RuntimeException("审核评审项目列表出错，错误信息："+e);
}
return "project";
}
/**
* 分页查询数据
* @param mmap
* @param state
* @return
*/
@RequiresPermissions("system:project:list")
@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);
log.info("根据状态查询实体类"+businessProject);
//分页查询 设置分页参数
PageHelper.startPage(pageNum,pageSize);//关键
List<BusinessProject> list = businessProjectService.selectBusinessProjectList(businessProject);
PageInfo<BusinessProject> pageInfo = new PageInfo<>(list);
//分页完成
System.out.println("分页实体类: "+pageInfo.toString());
//根据选项卡不同，局部刷新不同的选项卡，但是分页前端是统一的.
if(businessProject.getState().equals("0")){
mmap.put("Projectslist0",list);
mmap.put("pageInfo",pageInfo);
//重点 ：project html页面名称 main-content0 元素id thymeleaf根据元素id 刷新数据，但是只能定位列表，无法定位分页，所以我的分页数据不更新，但是这个方法已经把分页数据携带上了，不想单独再给分页写一个方法，去刷新。
return "project::main-content0";
} else if (businessProject.getState().equals("1")) {
mmap.put("Projectslist1",list);
mmap.put("pageInfo",pageInfo);
return "project::main-content1";
}else if (businessProject.getState().equals("2")) {
mmap.put("Projectslist2",list);
mmap.put("pageInfo",pageInfo);
return "project::main-content2";
}else if (businessProject.getState().equals("3")) {
mmap.put("Projectslist3",list);
mmap.put("pageInfo",pageInfo);
return "project::main-content3";
}
log.info("根据状态查询list: "+list);
return "评审项目,局部刷新数据错误,!";
} catch (Exception e) {
throw new RuntimeException(e);
}
}
前端
<!DOCTYPE html>
<html lang="zh">
<head>
<th:block th:include="include :: header('评审项目列表')" />
<th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeIn">
<div class="row">
<div class="col-sm-12">
<div class="tabs-container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" onclick="viewBystate(0)" href="#tab-1" aria-expanded="true">草稿</a>
</li>
<li class=""><a data-toggle="tab" onclick="viewBystate(1)" href="#tab-2" aria-expanded="false">待审核</a>
</li>
<li class=""><a data-toggle="tab" onclick="viewBystate(2)" href="#tab-3" aria-expanded="false">已审核</a>
</li>
<li class=""><a data-toggle="tab" onclick="viewBystate(3)" href="#tab-4" aria-expanded="false">已撤销</a>
</li>
</ul>
<div class="tab-content">
<!--草稿-->
<div id="tab-1" class="tab-pane active">
<div class="panel-body" id="main-content0">
<div class="ibox" th:fragment="main-content0" style="background-color: #3c8dbc;" th:each="mode0:${Projectslist0}">
<div class="ibox-title">
<span class="label label-primary pull-right">草稿</span>
<span class="ibox-title" style="font-weight:bold " th:text="${#dates.format(mode0.submitdate, 'yyyy-MM-dd')}"></span>
<span class="ibox-title" style="font-weight:bold " th:text="'预算单位：'+${mode0.submitunit}"></span>
<span class="ibox-title" style="color: #1a7bb9" th:text="'状态：待审核'"></span>
</div>
<div class="ibox-content">
<div class="row m-t-sm">
<div class="col-sm-10" >
<h5>项目详情</h5>
<p th:text="' 项目名称:'+${mode0.rojectname}">
<p th:text="' 联系人:'+${mode0.linkman}">
<p th:text="' 手机号:'+${mode0.phone}">
</div>
<div class="col-sm-2" >
<h5>操作</h5>
<button type="button" onclick="viewByid(${mode0.id})" class="btn btn-w-m btn-primary">查看</button>
<button style="margin-top: 10px;" type="button" class="btn btn-w-m btn-info"> 审核</button>
</div>
</div>
</div>
</div>
</div>
<!--待审核-->
<div id="tab-2" class="tab-pane">
<div class="panel-body" id="main-content1" >
<div class="ibox" th:fragment="main-content1" style="background-color: #3c8dbc;" th:each="mode1:${Projectslist1}">
<div class="ibox-title">
<span class="label label-primary pull-right">待审核</span>
<span class="ibox-title" style="font-weight:bold " th:text="${#dates.format(mode1.submitdate, 'yyyy-MM-dd')}"></span>
<span class="ibox-title" style="font-weight:bold " th:text="'预算单位：'+${mode1.submitunit}"></span>
<span class="ibox-title" style="color: #1a7bb9" th:text="'状态：待审核'"></span>
</div>
<div class="ibox-content">
<div class="row m-t-sm">
<div class="col-sm-10" >
<h5>项目详情</h5>
<p th:text="' 项目名称:'+${mode1.rojectname}">
<p th:text="' 联系人:'+${mode1.linkman}">
<p th:text="' 手机号:'+${mode1.phone}">
</div>
<div class="col-sm-2" >
<h5>操作</h5>
<button type="button" onclick="viewByid(${mode1.id})" class="btn btn-w-m btn-primary">查看</button>
<button style="margin-top: 10px;" type="button" class="btn btn-w-m btn-info"> 审核</button>
</div>
</div>
</div>
</div>
</div>
<!--已审核-->
<div id="tab-3" class="tab-pane">
<div class="panel-body" id="main-content2" >
<div class="ibox" th:fragment="main-content2" style="background-color: #3c8dbc;" th:each="mode:${Projectslist2}">
<div class="ibox-title">
<span class="label label-primary pull-right">已审核</span>
<span class="ibox-title" style="font-weight:bold " th:text="${#dates.format(mode.submitdate, 'yyyy-MM-dd')}"></span>
<span class="ibox-title" style="font-weight:bold " th:text="'预算单位：'+${mode.submitunit}"></span>
<span class="ibox-title" style="color: #1a7bb9" th:text="'状态：待审核'"></span>
</div>
<div class="ibox-content">
<div class="row m-t-sm">
<div class="col-sm-10" >
<h5>项目详情</h5>
<p th:text="' 项目名称:'+${mode.rojectname}">
<p th:text="' 联系人:'+${mode.linkman}">
<p th:text="' 手机号:'+${mode.phone}">
</div>
<div class="col-sm-2" >
<h5>操作</h5>
<button type="button" onclick="viewByid(${mode.id})" class="btn btn-w-m btn-primary">查看</button>
<button style="margin-top: 10px;" type="button" class="btn btn-w-m btn-info"> 审核</button>
</div>
</div>
</div>
</div>
</div>
<!--已撤销-->
<div id="tab-4" class="tab-pane">
<div class="panel-body" id="main-content3" >
<div class="ibox" th:fragment="main-content3" style="background-color: #3c8dbc;" th:each="mode:${Projectslist3}">
<div class="ibox-title">
<span class="label label-primary pull-right">已撤销</span>
<span class="ibox-title" style="font-weight:bold " th:text="${#dates.format(mode.submitdate, 'yyyy-MM-dd')}"></span>
<span class="ibox-title" style="font-weight:bold " th:text="'预算单位：'+${mode.submitunit}"></span>
<span class="ibox-title" style="color: #1a7bb9" th:text="'状态：待审核'"></span>
</div>
<div class="ibox-content">
<div class="row m-t-sm">
<div class="col-sm-10" >
<h5>项目详情</h5>
<p th:text="' 项目名称:'+${mode.rojectname}">
<p th:text="' 联系人:'+${mode.linkman}">
<p th:text="' 手机号:'+${mode.phone}">
</div>
<div class="col-sm-2" >
<h5>操作</h5>
<button type="button" onclick="viewByid(${mode.id})" class="btn btn-w-m btn-primary">查看</button>
<button style="margin-top: 10px;" type="button" class="btn btn-w-m btn-info"> 审核</button>
</div>
</div>
</div>
</div>
</div>
<!--分页插件-->
<!--<div class="modal-footer no-margin-top">
<ul class="pagination pagination-lg">
<li class="page-item"><a class="page-link"><span>当前页为：</span><span th:text="第+${pageInfo.pageNum}+页"></span></a></li>
<!–<li class="page-item"><a class="page-link" th:href="@{/emp/findAll}">首页</a></li>–>
<li><a th:href="@{/project/ByStatelist/3/?pageNum=0}">首页</a></li>
<li class="page-item"><a class="page-link" th:href="@{/project/ByStatelist/3/(pageNum=1)}">1</a></li>
<li class="page-item"><a class="page-link" th:href="@{/project/ByStatelist/3/(pageNum=2)}">2</a></li>
<li class="page-item"><a class="page-link" th:href="@{/project/ByStatelist/3/(pageNum=3)}">3</a></li>
<li class="page-item"><a class="page-link" th:href="@{/project/ByStatelist/3/(pageNum=${pageInfo.getNextPage()})}">下一页</a></li>
<li class="page-item"><a class="page-link"><span th:text="共+${pageInfo.pageSize}+页"></span></a></li>
</ul>
</div>-->
</div>
</div>
<div align="center">
<a class="page-link"><span>总数为：</span><span th:text="${pageInfo0.total}"></span></a>
<a th:href="@{business/project/ByStatelist/0/?pageNum=1}" >首页</a>
<b th:text="'共 '+ ${pageInfo0.total/pageInfo0.pageSize}+ ' 页'"></b>
<a th:if="${pageInfo0.isFirstPage} == true" th:href="@{business/project/ByStatelist/0/(pageNum=${pageInfo0.pages - 1})}" >上一页</a>
<a th:href="@{'business/project/ByStatelist/0/?pageNum=' + ${i}}" th:each="i :${#numbers.sequence(1, pageInfo0.total/pageInfo0.pageSize)}" th:text=" ${i}"></a>
<a th:if="${pageInfo0.isLastPage} == true" th:href="@{business/project/ByStatelist/0/(pageNum=${pageInfo0.pages + 1})}" >下一页</a>
<a th:href="@{business/project/ByStatelist/0/(pageNum=${pageInfo0.total/pageInfo0.pageSize})}" >尾页</a>
</div>
</div>
</div>
</div>
</div>
</body>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script> var ctx = "\/"; var lockscreen = null; if(lockscreen){window.top.location=ctx+"lockscreen";} </script>
<a id="scroll-up" href="#" class="btn btn-sm display"><i class="fa fa-angle-double-up"></i></a>
<script src="/js/jquery.min.js?v=3.6.1"></script>
<script src="/js/bootstrap.min.js?v=3.3.7"></script>
<!-- bootstrap-table 表格插件 -->
<script src="/ajax/libs/bootstrap-table/bootstrap-table.min.js?v=1.18.3"></script>
<script src="/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=1.18.3"></script>
<script src="/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js?v=1.18.3"></script>
<!-- jquery-validate 表单验证插件 -->
<script src="/ajax/libs/validate/jquery.validate.min.js?v=1.19.3"></script>
<script src="/ajax/libs/validate/jquery.validate.extend.js?v=1.19.3"></script>
<script src="/ajax/libs/validate/messages_zh.js?v=1.19.3"></script>
<!-- bootstrap-table 表格树插件 -->
<script src="/ajax/libs/bootstrap-table/extensions/tree/bootstrap-table-tree.min.js?v=1.18.3"></script>
<!-- 遮罩层 -->
<script src="/ajax/libs/blockUI/jquery.blockUI.js?v=2.70.0"></script>
<script src="/ajax/libs/iCheck/icheck.min.js?v=1.0.3"></script>
<script src="/ajax/libs/layer/layer.min.js?v=3.5.1"></script>
<script src="/ajax/libs/layui/layui.min.js?v=2.7.5"></script>
<script src="/ruoyi/js/common.js?v=4.7.6"></script>
<script src="/ruoyi/js/ry-ui.js?v=4.7.6"></script>
<script th:inline="javascript">
var prefix = ctx + "business/project"
//选项卡查询不同数据
function viewBystate(state){
console.log("选择状态"+state)
$.ajax({
type : "get",
url : prefix + "/ByStatelist/"+state,
error : function(request) {
$.modal.alertError("系统错误");
},
success : function(data) {
// $.operate.successCallback(data);
console.log(data)
if(state==0){
console.log(0)
$("#main-content0").html(data);
}else if(state==1){
console.log(1)
$("#main-content1").html(data);
}else if(state==2){
$("#main-content2").html(data);
}else if(state==3){
$("#main-content3").html(data);
}
}
});
}
</script>
</html>
