Grails使用模板加载异步分页时点击页码无法更新页面

Grails 内置 g:paginate 标签默认生成的是触发全页跳转的静态超链接，本身不内置任何Ajax异步交互逻辑，你当前实现的所有问题都来自于没有对齐这套默认机制的交互要求，具体的疏漏和修复点如下：

• 第一处疏漏：分页链接的点击拦截逻辑完全缺失
  你仅通过jQuery把分页模板异步加载到了指定容器中，但模板生成的分页按钮依然是默认的全页跳转<a>标签，没有任何逻辑拦截默认跳转行为、替换为异步局部更新流程，自然点击后不会触发页面局部刷新。
  修复时需要先给分页标签加上统一的类名标记，修改_phraseCount模板内容：

  <g:paginate 
    controller="dashboard" 
    action="result" 
    total="${phraseCount ?: 0}" 
    params="${_params}" 
    next=" " 
    prev=" "
    class="ajax-pagination-link"
  />
  

  随后通过事件委托绑定分页容器的点击逻辑——注意因为每次异步加载都会替换容器内的DOM节点，直接给链接绑定的事件会在DOM刷新后失效，必须把事件绑定在常驻的父级容器上：

  // 初次加载分页组件
  $("#phrase-pagination").load("/dashboard/getPhrasePageCount");
  
  // 事件委托拦截分页链接点击
  $("#phrase-pagination").on("click", ".ajax-pagination-link", function(e){
    // 阻止默认全页跳转
    e.preventDefault();
    const targetUrl = $(this).attr("href");
    // 异步拉取对应页的分页组件内容
    $("#phrase-pagination").load(targetUrl);
    // 注意：此处还需要同步拉取对应页的列表内容，替换原有列表DOM，否则仅分页条更新不会改变实际展示的数据
  });
  

• 第二处疏漏：后端方法存在逻辑错误
  你当前实现的getPhrasePageCount方法有两个直接影响功能的bug：
  • 方法内部存在自递归调用：方法体里int countyResult = getPhrasePageCount()会无限循环调用自身，最终触发栈溢出，这里需要替换为实际计算条目总数的业务逻辑（比如数据库查询总条数的代码）。
  • 渲染方式不匹配：_phraseCount是下划线开头的局部模板，不能通过render(view: ...)的方式渲染，要改为模板渲染写法：

    def getPhrasePageCount(){
      // 替换为实际计算总数的业务逻辑
      int countyResult = phraseService.getTotalCount()
      render(template: 'phraseCount', model: [
        phraseCount: countyResult, 
        _params: params
      ])
    }
    

• 第三处疏漏：分页状态计算的参数透传缺失
  上一页按钮不可点击的本质原因是，g:paginate标签会自动从请求参数中读取offset、max值计算当前页码，你初次加载分页时没有带任何分页参数，标签会默认把当前页识别为第一页，自然会把上一页按钮渲染为禁用状态。只要点击分页时，把链接自带的分页参数正常透传到后端渲染流程，标签就会根据当前页码正确渲染可点击的上一页/下一页状态。

额外提醒：如果你配置了Grails的缓存规则，要记得给异步请求的路由加上不缓存标记，否则可能出现分页参数被缓存、展示内容不更新的隐蔽问题。

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