Pagination and View More

Pagination & View More are controls that allow users to view additional records within a data set.

View More


When to Use

  • View More is the preferred method for displaying records from a large data set in a progressive manner.

When Not to Use

  • Technology limitations or the need to allow users to navigate to specific subsets of data may drive the need Pagination to be used.

Variations

Usage

  • View more is the preferred control for allowing users to view additional results within a large data set and should be used in most contexts.
  • For optimal ease of use, the View More button may be combined with lazy loading (automatically displaying additional results as the user scrolls down the screen). For example, start by displaying 10-30 results and when the user scrolls to the end of this set, begin displaying additional results (in a similar increment of 10-30). After two-three automatic displays, the View More button should appear to confirm the user’s intention. This allows for performance optimization while maintaining the user’s ability to access content that may appear below the result set.
  • It is also recommended that the number indicate the number of additional results, for example: “Load 10 more results.” An option to “View All Results” may also be used for smaller data sets.
  • When using View More, a Scroll to Top button should be used to allow users to easily return to the top of the screen.

Variations

View More with Lazy Load


Loading More...
No More Results

When to Use

  • This combination is best for contexts in which users are in an exploratory mode and when it is not critical for them the navigate to a specific subset of results.

Pagination



When to Use

  • When there are technology limitations or legacy formats that require a page refresh to load additional results/content.
  • When users may need to navigate/link to a specific page of results in the set.

Additional Information

Pagination may include up to three sections:

  • Page numbers and navigation arrows (required)
  • Current range and total number of results (recommended)
  • Number of results per page (optional)

To conserve space on mobile, the pagination numbers can range from 2 to 5 page numbers.

If there is a only one page of results (but additional results could display based on search criteria), there should still be a pagination mechanism.

Developer Notes

View More

<button data-action="view-more-example2" class="spark-btn spark-btn--md spark-btn--view-more">Load More Results</button>

<script type="text/javascript">
  'use strict';

  var ViewMoreExample2 = {
    createProgressMeter: function(example){
      // Init Progress meter
      var progressMeterHTML =  '<progress></progress>'+
      '<span class="spark-progress__meter"></span>'+
      'Loading ';
      if(example.getAttribute('data-result-length'))
        progressMeterHTML += example.getAttribute('data-result-length');
      progressMeterHTML += ' Results...';
      return progressMeterHTML;
    },

    mockNetworkCall: function(example){
    // Save original button state
      var orig = example.innerHTML;
      var origClasses = example.className;

    // Switch to progress meter, simulates the active state of a network request
      example.className += ' spark-progress active';
      example.innerHTML = ViewMoreExample2.createProgressMeter(example);

    // Revert back after timeout, to simulate a completed network request
      window.setTimeout(function(){
        example.className = origClasses;
        example.innerHTML = orig;
      }, 3000);
    }
  };

  // Wait for page to finish loading
  document.addEventListener('DOMContentLoaded', function() {

  // Click Listener Event
    function addClickListner(example) {
      example.addEventListener('click', function(e){
        e.preventDefault();
        // Make sure button is not in active state
        if(e.target.className.indexOf('active') < 0) {
          // Simulate a network call
          ViewMoreExample2.mockNetworkCall(e.target);
        }
      }, false);
    }

  // Target buttons
    var viewMoreExamples = document.querySelectorAll('[data-action="view-more-example2"]');
    for (var i = viewMoreExamples.length - 1; i >= 0; i--) {
      addClickListner(viewMoreExamples[i]);
    }
  });
</script>

Adding the spark-btn--view-more class to the button will override the default button styling.

When making your network call to load more content in, you will need to add a Progress Indicator to the button. The example shows how a mock connection might work. The button is changed during the network request, and then reverted to it’s original state once the request is complete.

View More with Lazy Load

Loading More...
No More Results 
<button data-action="view-more-example4" class="spark-btn spark-btn--md spark-btn--view-more">Load More Results</button>

<hr />

<div class="spark-progress spark-progress--horizontal spark-progress--xs spark-progress--lazy-load" role="progressbar">
  <progress></progress>
  <span class="spark-progress__text" role="status">Loading More...</span>
  <span class="spark-progress__meter"></span>
</div>

<hr />

<div class="spark-progress spark-progress--horizontal spark-progress--xs spark-progress--lazy-load spark-progress--disabled" role="progressbar">
  <progress></progress>
  <span class="spark-progress__text" role="status">No More Results</span>
  <span class="spark-progress__meter"></span>
</div>

Adding the spark-progress--lazy-load class will alter the progress indicator to the lazy load style.

Adding the spark-progress--disabled will hide the progress meter and change the text to a disabled style, when there are no more results to load.

Pagination

<nav class="spark-pagination">

  <div class="spark-pagination__pages">
    <a class="spark-pagination__arrow spark-pagination__arrow--previous" disabled>
      <span class="spark-pagination__arrow-text">Previous</span>
    </a>
    <a class="spark-pagination__item spark-pagination__item--active" href="javascript: void(0);">
      1
    </a>
    <a class="spark-pagination__item" href="javascript: void(0);">
      2
    </a>
    <a class="spark-pagination__item" href="javascript: void(0);">
      3
    </a>
    <a class="spark-pagination__item" href="javascript: void(0);">
      4
    </a>
    <a class="spark-pagination__item" href="javascript: void(0);">
      5
    </a>
    <a class="spark-pagination__arrow spark-pagination__arrow--next" href="javascript: void(0);">
      <span class="spark-pagination__arrow-text">Next</span>
    </a>
  </div>

  <div class="spark-pagination__results">

    <div class="spark-pagination__per-page">
      <label class=" spark-select spark-select--no-label">
        <select class="spark-select__input" title="Results Per Page">
          <option>10 results</option>
          <option>25 results</option>
          <option>50 results</option>
          <option>100 results</option>
        </select>
        <span class="spark-label"></span>
      </label>
    </div>

    <div class="spark-pagination__summary">
      1-10 of 147 results
    </div>

  </div>

</nav>

The pagination component consists of three parts: the page list, the results per-page select input, and the total results count.

At the start and end of the page list should be a next and previous arrow, respectively. Any text contained inside the .spark-pagination__arrow-text element will be hidden at the extra small breakpoint.

Each item in the page list should be given a class of spark-pagination__item. The active item should receive an additional class of spark-pagination__item--active.

The results per-page select input uses the special “no label” version of the select input by adding the spark-select--no-label class.

Truncated Example

<nav class="spark-pagination">

  <div class="spark-pagination__pages">
    <a class="spark-pagination__arrow spark-pagination__arrow--previous">
      <span class="spark-pagination__arrow-text">Previous</span>
    </a>
    <a class="spark-pagination__item" href="javascript: void(0);">
      1
    </a>
    <span class="spark-pagination__ellipsis" href="javascript: void(0);">
      ...
    </span>
    <a class="spark-pagination__item" href="javascript: void(0);">
      7
    </a>
    <a class="spark-pagination__item spark-pagination__item--active" href="javascript: void(0);">
      8
    </a>
    <a class="spark-pagination__item" href="javascript: void(0);">
      9
    </a>
    <span class="spark-pagination__ellipsis" href="javascript: void(0);">
      ...
    </span>
    <a class="spark-pagination__item" href="javascript: void(0);">
      12
    </a>
    <a class="spark-pagination__arrow spark-pagination__arrow--next" href="javascript: void(0);">
      <span class="spark-pagination__arrow-text">Next</span>
    </a>
  </div>

  <div class="spark-pagination__results">

    <div class="spark-pagination__per-page">
      <label class=" spark-select spark-select--no-label">
        <select class="spark-select__input" title="Results Per Page">
          <option>10 results</option>
          <option>25 results</option>
          <option>50 results</option>
          <option>100 results</option>
        </select>
        <span class="spark-label"></span>
      </label>
    </div>

    <div class="spark-pagination__summary">
      1-10 of 147 results
    </div>

  </div>

</nav>

When there are too many items to show in the page list, additional elements with the class spark-pagination__ellipsis should be used as a wrapper form a set of three dots. Always make sure you show the first and last item of the list.