connectPagination

import { connectPagination } from 'instantsearch.js/es/connectors';

const customPagination = connectPagination(
  (renderOptions, isFirstRender) => {
    const { pages, currentRefinement, nbPages, isFirstPage, isLastPage, refine, widgetParams } = renderOptions;
    const { container } = widgetParams;
    
    container.innerHTML = `
      <div>
        <button ${isFirstPage ? 'disabled' : ''} data-page="${currentRefinement - 1}">
          Previous
        </button>
        ${pages.map(page => `
          <button 
            data-page="${page}"
            style="${page === currentRefinement ? 'font-weight: bold' : ''}"
          >
            ${page + 1}
          </button>
        `).join('')}
        <button ${isLastPage ? 'disabled' : ''} data-page="${currentRefinement + 1}">
          Next
        </button>
      </div>
    `;
    
    container.querySelectorAll('button').forEach(button => {
      button.addEventListener('click', (e) => {
        const page = parseInt(e.target.dataset.page);
        if (!isNaN(page)) {
          refine(page);
        }
      });
    });
  }
);

search.addWidgets([
  customPagination({
    container: document.querySelector('#pagination'),
  }),
]);