You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

AddSearch UI自定义分页点击箭头始终跳转至第一页问题求助

问题描述

我正在使用 addsearch-ui v0.7.11,尝试基于模板示例实现自定义分页,但点击箭头按钮时,无论当前处于哪一页,都会跳转至第一页。点击箭头按钮时会添加查询参数 &search_page=NaN,这可能是问题诱因。

以下是我的分页模板代码:

var paginationTemplate = `
  <div class="addsearch-pagination">
    {{#equals currentPage 1}}    
      <button disabled class="addsearch-pagination-disabled-button" aria-label="Previous page">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M4.21214 7.45579L10.0789 1.2253C10.3618 0.9249 10.8206 0.9249 11.1035 1.2253L11.7878 1.95209C12.0704 2.25217 12.0707 2.7382 11.789 3.03892L7.13935 7.99984L11.7887 12.9611C12.0707 13.2618 12.0701 13.7478 11.7875 14.0479L11.1032 14.7747C10.8203 15.0751 10.3615 15.0751 10.0786 14.7747L4.21214 8.54389C3.92929 8.24349 3.92929 7.75619 4.21214 7.45579Z" fill="#10559A"/>
        </svg>
      </button>
    {{/equals}}
    {{#gt currentPage 1}}
      <button data-page="previous" aria-label="Previous page">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M4.21214 7.45579L10.0789 1.2253C10.3618 0.9249 10.8206 0.9249 11.1035 1.2253L11.7878 1.95209C12.0704 2.25217 12.0707 2.7382 11.789 3.03892L7.13935 7.99984L11.7887 12.9611C12.0707 13.2618 12.0701 13.7478 11.7875 14.0479L11.1032 14.7747C10.8203 15.0751 10.3615 15.0751 10.0786 14.7747L4.21214 8.54389C3.92929 8.24349 3.92929 7.75619 4.21214 7.45579Z" fill="#10559A"/>
        </svg>
      </button>
    {{/gt}}
    {{#each pages}}
      <button data-page="{{this}}" aria-label="Go to results page {{this}}" {{#equals ../currentPage this}}data-active="true" aria-current="true"{{/equals}}>
        {{this}}
      </button>
    {{/each}}
    {{#lt currentPage lastPage}}
      <button data-page="next" aria-label="Next page">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M11.7878 8.54407L5.92106 14.7746C5.63811 15.0751 5.17938 15.0751 4.89646 14.7746L4.2122 14.0479C3.92974 13.748 3.9292 13.2618 4.211 12.9611L8.8605 7.99998L4.211 3.03892C3.9292 2.73823 3.92974 2.25205 4.2122 1.95207L4.89646 1.22537C5.17941 0.924876 5.63814 0.924876 5.92106 1.22537L11.7878 7.45593C12.0707 7.75639 12.0707 8.24357 11.7878 8.54407Z" fill="#10559A"/>
        </svg>
      </button>
    {{/lt}}
    {{#equals currentPage lastPage}}    
      <button disabled class="addsearch-pagination-disabled-button" aria-label="Next page">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M11.7878 8.54407L5.92106 14.7746C5.63811 15.0751 5.17938 15.0751 4.89646 14.7746L4.2122 14.0479C3.92974 13.748 3.9292 13.2618 4.211 12.9611L8.8605 7.99998L4.211 3.03892C3.9292 2.73823 3.92974 2.25205 4.2122 1.95207L4.89646 1.22537C5.17941 0.924876 5.63814 0.924876 5.92106 1.22537L11.7878 7.45593C12.0707 7.75639 12.0707 8.24357 11.7878 8.54407Z" fill="#10559A"/>
        </svg>
      </button>
    {{/equals}}
  </div>
`;
解决建议
  • 替换"previous"/"next"为具体页码值:addsearch-ui 的分页按钮 data-page 属性需要接收数字页码,而不是"previous"或"next"字符串。当传入字符串时,框架无法解析为有效数字,导致 search_page=NaN,最终回退到第一页。
    修改方式:

    • 上一页按钮:将 data-page="previous" 改为 data-page="{{currentPage - 1}}"
    • 下一页按钮:将 data-page="next" 改为 data-page="{{currentPage + 1}}"
  • 验证模板语法支持:确认模板引擎支持算术运算(如 currentPage -1)。如果不支持,需要在模板渲染前计算好上一页和下一页的页码值,再传递给模板使用。

修改后的关键代码片段:

{{#gt currentPage 1}}
  <button data-page="{{currentPage - 1}}" aria-label="Previous page">
    <!-- SVG内容保持不变 -->
  </button>
{{/gt}}

{{#lt currentPage lastPage}}
  <button data-page="{{currentPage + 1}}" aria-label="Next page">
    <!-- SVG内容保持不变 -->
  </button>
{{/lt}}

内容的提问来源于stack exchange,提问作者usr4896260

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.16 19:28:00