FEC Pattern Library

Data pagination

Collections of data are split into multiple pages because the size of the data would take too long to render all at once and because very long collections are more than a user can scan or comprehend.

Data pagination controls allow users to determine how many items are compared on one page, and to navigate forward and backward one page at a time in the results list.

When to use

  • On data and legal tables when the exact number of items or pages returned would be so large that loading the count would make the page less performant

When to consider something else

  • When the number of items is easily counted without impacting performance, such as in a feed of posts, use feed pagination
<div class="container" style="padding: 2rem">
    <div id="results_wrapper" class="dataTables_wrapper no-footer dataTables_wrapper--panel">
        <div class="results-info">
            <div class="dataTables_length" id="results_length">
                <label for="results-length">Results per page:
                    <select name="results_length" aria-controls="results" class="" id="results-length">
                        <option value="30">30</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </label>
            </div>
            <div class="dataTables_paginate paging_simple" id="results_paginate">
                <a class="paginate_button previous disabled" aria-controls="results" data-dt-idx="0" tabindex="0" id="results_previous">Previous</a>
                <a class="paginate_button next" aria-controls="results" data-dt-idx="1" tabindex="0" id="results_next">Next</a>
            </div>
        </div>
    </div>
</div>
 
<div class="container" style="padding: 2rem">
  <div id="results_wrapper" class="dataTables_wrapper no-footer dataTables_wrapper--panel">
    <div class="results-info">
      <div class="dataTables_length" id="results_length">
        <label for="results-length">Results per page:
          <select name="results_length" aria-controls="results" class="" id="results-length">
            <option value="30">30</option>
            <option value="50">50</option>
            <option value="100">100</option>
          </select>
        </label>
      </div>
      <div class="dataTables_paginate paging_simple" id="results_paginate">
        <a class="paginate_button previous disabled" aria-controls="results" data-dt-idx="0" tabindex="0" id="results_previous">Previous</a>
        <a class="paginate_button next" aria-controls="results" data-dt-idx="1" tabindex="0" id="results_next">Next</a>
      </div>
    </div>
  </div>
</div>
 
/* No context defined. */
  • Handle: @data-pagination
  • Preview:
  • Filesystem Path: components/02-components/pagination/01-data-pagination/data-pagination.html