Thymeleaf分页：点击页码前修改th:field值再执行action的方法

完全可以通过th:onclick结合表单提交的方式实现你要的交互，核心思路是用一个绑定了th:field="*{page}"的隐藏表单控件来存储页码值，点击页码时通过JS更新这个控件的值，再提交表单触发后端方法。

具体实现步骤： #

1. 添加表单与隐藏绑定控件
   首先需要用表单包裹分页组件，同时加一个隐藏的<input>来绑定page字段——因为<ul>本身不是表单控件，无法直接通过th:field绑定数据：

   <form th:action="@{/your-backend-action}" method="post" id="paginationForm">
       <!-- 隐藏input绑定page字段，用于传递页码到后端 -->
       <input type="hidden" th:field="*{page}" id="pageInput"/>
       
       <ul class="pagination justify-content-end">                
           <li class="page-item" th:classappend="${page == 1} ? 'disabled'">
               <a class="page-link" href="javascript:void(0);" th:onclick="setPageAndSubmit(1)">1</a>
           </li>
           <!-- 示例第2页，其他页码可依此类推 -->
           <li class="page-item" th:classappend="${page == 2} ? 'disabled'">
               <a class="page-link" href="javascript:void(0);" th:onclick="setPageAndSubmit(2)">2</a>
           </li>
       </ul>  
   </form>
   

2. 编写JS处理逻辑
   定义一个简单的JS函数，负责更新页码值并提交表单：

   function setPageAndSubmit(pageNum) {
       // 更新隐藏input的页码值
       document.getElementById('pageInput').value = pageNum;
       // 提交表单触发后端方法
       document.getElementById('paginationForm').submit();
   }
   

简化写法（无需单独JS函数） #

如果不想单独写JS函数，也可以直接把逻辑内联到th:onclick中：

<a class="page-link" href="javascript:void(0);" 
   th:onclick="document.getElementById('pageInput').value = 1; document.getElementById('paginationForm').submit();">1</a>

关键注意事项： #

• 不要直接用href="action"跳转，这种方式会直接访问后端接口，无法先更新page字段的值。
• 页码的禁用状态可以通过th:classappend根据当前page的值动态添加，比如当前处于第1页时，给对应<li>加上disabled类。
• 如果后端接口是GET请求，只需把表单的method改成get即可，提交时页码会作为URL参数传递。

内容的提问来源于stack exchange，提问作者Discipulos