Get total number of hits in custom Pagination component

Hi, I am trying to implement pagination of results on my page. I have no problem with rendering page buttons and controlling pagination. What makes me hard times, though, is the stat info I want to display next to the page numbers controls. I would like to render something like this:

Showing 1-10 of total 3450 results.

I am using connectPagination to create my custom pagination widget but to render the text above I need the number of total hits which the connectPagination API doesn’t provide. Other way would be to use custom Stats widget with connectStats API, which unfortunately doesn’t provide information about current page. Any tips how to obtain my goal?

Hey @kotrla,

This works for me. I’m sure you can do better…

search.addWidget({
  render: function(opts) {
    const results = opts.results;
    if (results.nbHits !== 0) {
      ...
      const startingfrom = ((results.page + 1) * 20) - 19;
      if (((results.page + 1) * 20) > results.nbHits) {
        var endingat = results.nbHits;
      } else {
        var endingat = ((results.page + 1) * 20);
      }
      $('#stats').html(`
        <table class="stats">
          <tbody>
            <tr>
              <td>${startingfrom} - ${endingat} of ${results.nbHits.toLocaleString()}</td>
            </tr>
          </tbody>
        </table>
      `);
      ...
    }
  }
}),

search.addWidget(
  pagination({
    container: '#pages',
    templates: {
      first: '&#171; first',
      previous: '&#8249; prev',
      next: 'next &#8250;',
      last: 'last &#187;',
    },
  })
);

image