Materialize CSS Pagination

Pagination is used to separate the content into discrete pages that is short and easy to understand. Materialize CSS provide classes to create a pagination bar that holds the links to the other pages.

The pagination class is used to set the <ul> list element as a pagination component. The pages that have to be shown are defined inside this component as <li> items. A left and right arrow icon can be used to show the buttons for moving to the next or previous page.

Syntax:

<ul class="pagination">
  <li class="disabled">
    <a href="#!">
      <i class="material-icons">
        chevron_left
      </i>
    </a>
  </li>
  <li class="active">
    <a href="#!">1</a>
  </li>
  <li class="waves-effect">
    <a href="#!">2</a>
  </li>
  <li class="waves-effect">
    <a href="#!">3</a>
  </li>
  <li class="waves-effect">
    <a href="#!">
      <i class="material-icons">
        chevron_right
      </i>
    </a>
  </li>
</ul>

Example:

HTML

<html>
  
<head>
    <meta name="viewport" content=
    "width=device-width, initial-scale=1.0" />
  
    <!-- Import Material Icon Fonts -->
    <link rel="stylesheet" href=
"https://fonts.googleapis.com/icon?family=Material+Icons">
  
    <!-- Include Compiled and minified 
        Materialize CSS -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
  
    <!-- Include jQuery -->
    <script type="text/javascript" src=
"https://code.jquery.com/jquery-2.1.1.min.js">
    </script>
  
    <!-- Compiled and minified 
        Materialize JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
    </script>
</head>
  
<body>
    <div class="card-panel">
        <h3 class="center">
            Pagination
        </h3>
  
        <!-- Use the pagination class -->
        <ul class="pagination center-align">
  
            <!-- Use icon inside list item
                for the left arrow -->
            <li class="disabled">
                <a href="#!">
                    <i class="material-icons">
                        chevron_left
                    </i>
                </a>
            </li>
  
            <!-- Various classes that can be
                used with the page links -->
            <li class="waves-effect">
                <a href="#!">1</a>
            </li>
            <li class="active green">
                <a href="#!">2</a>
            </li>
            <li class="waves-effect">
                <a href="#!">3</a>
            </li>
            <li class="waves-effect">
                <a href="#!">4</a>
            </li>
            <li class="waves-effect">
                <a href="#!">5</a>
            </li>
  
            <!-- Use icon inside list item
                for the right arrow -->
            <li class="waves-effect">
                <a href="#!">
                    <i class="material-icons">
                        chevron_right
                    </i>
                </a>
            </li>
        </ul>
    </div>
</body>
  
</html>