Algolia InstantSearch.js #hits仅1页或无结果时隐藏分页的实现问题

你可以通过监听InstantSearch的搜索结果状态，动态控制分页组件的显隐，步骤如下：

1. 先添加CSS控制默认状态，避免加载时闪烁

/* 分页组件默认隐藏 */
#pagination {
  display: none;
}
/* 符合显示条件时添加该类即可展示 */
#pagination.is-visible {
  display: block;
}

2. 修改InstantSearch初始化逻辑，添加结果状态监听
   你原本的分页组件配置不需要改动，只需要新增一段搜索状态监听代码即可：

// 这里是你原本的InstantSearch初始化代码，保留不动
const search = instantsearch({
  appId: 'YOUR_APP_ID',
  apiKey: 'YOUR_SEARCH_API_KEY',
  indexName: 'YOUR_INDEX_NAME',
});

// 你原本的组件注册逻辑保持不变
search.addWidgets([
  // 分页组件原有配置
  instantsearch.widgets.pagination({
    container: '#pagination',
    padding: 2
  }),
  // 其他原有组件（hits、searchBox等）保留不动
]);

// 新增搜索结果监听逻辑
search.on('render', () => {
  const paginationDom = document.querySelector('#pagination');
  const searchResults = search.helper.lastResults;
  
  // 无匹配结果或总页数<=1时隐藏分页，否则显示
  if (!searchResults || searchResults.nbPages <= 1) {
    paginationDom.classList.remove('is-visible');
  } else {
    paginationDom.classList.add('is-visible');
  }
});

// 原有启动代码保留
search.start();

逻辑说明 #

search.helper.lastResults.nbPages 是InstantSearch返回的当前搜索结果总页数，当总页数小于等于1时，无论是无匹配结果还是只有1页数据，都会隐藏分页组件，只有当总页数≥2时才展示。

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