How can I reset the listing pagination? - CCv4 Other FAQs

Written Feb 28, 2013 15:40

If you have a listing with both a search box and pagination, when the user switches from a listing with many pages to one with only a few the pagination can have the listing show an empty page until the user clicks 'Start' to get back to the beginning. This FAQ describes a partial solution to this.

The FAQs listing that you are using here had this problem, when the 'Clear' button is clicked it cleared the search boxes but did not reset the pagination. I added the code below to fix this.

Note that the code is written for MooTools 1.2.x without the MooTools More extension as that happens to be the set-up here. The MooTools More extension has better code for handling URIs.

This FAQ listing is controlled by a ChronoForm and the code is added in a Load JS action in the ChronoForm event. You can probably also add it from the Header box of a Custom Listing; or using a hidden module on the listing page.

The value that needs to be changed is in two places: a 'limitstart' hidden input in the pagination and a 'start' paramter in the search form URL. Both need to be changed to have the value '0'. Note that your listing may differ in the exact details.

window.addEvent('domready', function() {
  // save the start search values
  var category, keywords;
  category = $('filter_category_id').value;
  keywords = $('keywords').value;

  // enable the Clear button to clear the search terms
  // and reset the pagination
  $$('input[name=reset]')[0].addEvent('click', function(event) {
    event.stop();
    $('keywords').value = '';
    $('filter_category_id').value = '';
    clearPaginator();
    return false;
  });
  
  // check if the search terms have changed when the form is submitted
  // if it has then reset the pagination
  $('kb_search').addEvent('click', function() {
    if ( ('keywords').value != keywords || 
        $('filter_category_id').value != category ) {
      clearPaginator();
    }
  });

  // function to reset the pagination
  function clearPaginator() {
    var start, uri;
    start = $$('input[name=limitstart]')[0].value;
    uri = $('chronoform_KnowledgeBase').getProperty('action');
    uri = uri.replace(start, '0');
    $('chronoform_KnowledgeBase').setProperty('action', uri);
    $$('input[name=limitstart]')[0].value = 0;
  }
});

Note that the two lines shown commented out here are used to reset the search box settings and are not necessary to the pagination settings. The other highlighted text is the name of the form which you will need to find and edit to match your listing.

This solution is 'partial' because as written it only clears the pagination when the 'Clear' button is clicked. It needs to be extended to run when the other search elements change as well.