EG Xena Developer
WebsiteSign inDesign System
  • Introduction
  • The possibilities
    • Best practices
    • User experience
  • Development
    • Get started
      • Become a developer
      • Register your app
      • The Xena API
      • Authorization
      • Using OAuth
      • Using Xena Api with OAuth
      • Using WebHooks
      • Using Websync
      • Using Xena API Key
      • Creating plugins
    • Samples
    • API documentation
      • Xena
      • Cars (Giulia)
      • Articles & prices (Gaia)
  • User interface
    • Xena Design System
    • Use our stylesheet
    • Design Guide
      • Alerts and warnings
      • Buttons
      • Colors and fonts
      • Collapsible
      • Dropdowns
      • Forms
      • Icons
      • Layout
      • Modals
      • Navigation
      • Pagination
      • Panels
      • Tables
      • Other components
Powered by GitBook
On this page
  • Tables/pages
  • Panels
  1. User interface
  2. Design Guide

Pagination

Styles of paginations in tables and panels.

PreviousNavigationNextPanels

Last updated 4 years ago

Tables/pages

<div class="table-footer">
    <ul class="pagination">
        <li><a href="#" title="First"><i class="fas fa-angle-left"></i></a></li>
        <li><a href="#" title="Previous"><i class="fas fa-angle-double-left"></i></a></li>
        <li class="pagination-select">Page <select class="paging-select"><option>1</option> ... </select> of 5</li>
        <li><a href="#" title="Next"><i class="fas fa-angle-double-right"></i></a></li>
        <li><a href="#" title="Last"><i class="fas fa-angle-right"></i></a></li>
    </ul>
</div>

Panels

<!--Between panel-heading and panel-body-->
<ul class="panel-pagination">
    <li>
        <a href="#" title="First"><i class="fas fa-angle-left"></i></a>
        <a href="#" title="Previous"><i class="fas fa-angle-double-left"></i></a>
    </li>
    <li class="pagination-select">Page <select class="paging-select"><option>1</option> ... </select> of 5</li>
    <li>
        <a href="#" title="Next"><i class="fas fa-angle-double-right"></i></a>
        <a href="#" title="Last"><i class="fas fa-angle-right"></i></a>
    </li>
</ul>
Pagination beneath a table.
Pagination in a panel.