Pagination Fix for May 2021 Release

This snippet improves the new pagination method for Primo search results introduced in the May 2021 release, which will replace the current method in August 2021. Since all results are capped at 2,000, this customization removes links to non-existent pages and presents a warning message for searches with more than 2,000 results.

Examples

Default Pagination

Primo pagination navigator without customization, showing pages 201 and 202 as options and no warning message.

Pagination with Customization

Primo pagination navigator for page 200 of search results with pages 201 and 202 hidden and the warning: Only the first 2,000 results can be displayed. To see more results, try refining your search with different keywords or facets.

Code

Add the code below to the custom.js file in your local customization package, within the anonymous function and after the definition of your “app” variable.

app.component('prmPageNavMenuAfter', {
  template: '<pagination-fix></pagination-fix>'
});

app.component('paginationFix', {
  template: '<div ng-if="$ctrl.more_than_2000" id="pagination-warning" class="bar alert-bar"><p>Only the first 2,000 results can be displayed.</p><p>To see more results, try refining your search with different keywords or facets.</p></div>',
  controller: function($scope) {
    this.$onInit = function () {
      // Overwrite available pages
      var pagination_ctrl = $scope.$parent.$parent.$ctrl;
      var available_pages = pagination_ctrl.availablePages;
      var last_page = parseInt(2000 / pagination_ctrl.PAGE_SIZE);
      var true_pages = [];
      angular.forEach(available_pages, function(page) {
        if (parseInt(page) <= last_page) {
          true_pages.push(page);
        }
      });
      pagination_ctrl.availablePages = true_pages;
      
      // Display or hide result-cap warning message
      if (pagination_ctrl.numOfResults > 2000) {
        this.more_than_2000 = true;
      }
      else {
        this.more_than_2000 = false;
      }
    }
  }
});

If you have other customizations using the component prmPageNavMenuAfter, like External Search, place all wrappers in the same template. For example:

app.component('prmPageNavMenuAfter', {
  template: '<external-search-pagenav></external-search-pagenav><pagination-fix></pagination-fix>'
});

You can style the bar in your CSS stylesheet by adding a ruleset for #pagination-warning.

#pagination-warning {
  margin: 1rem;
  /* more rules here */
}

Zip up your package, upload in the Primo Back Office, and deploy your view to see the changes.