December 25, 2016

Materialize Pagination

Materialize Pagination : Pagination is used to show long data with the help of links to different-different parts. Materialize provides classes to create pagination. Here in this tutorial we are going to explain how you can create pagination in materialize framework. You can also use our online editor to edit and run the code online.

Materialize Pagination Example

First create ul with class=”pagination” and then add li and pagination link. You can use Class=”active” to show the active link. Here is an example of simple pagination-

Materialize Pagination Example:

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

Try it »

If you run the above example it will produce the output something like this –

Learn More

Let us have some More example and demo about the Materialize Pagination.

Disable Pagination Link

You can disable the pagination by simply adding the class=”disabled” to li element simply as below-

Disabled Pagination Link Example:

<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><a href="#!">2</a></li>
    <li ><a href="#!">3</a></li>
    <li><a href="#!">4</a></li>
    <li><a href="#!"><i class="material-icons">chevron_right</i></a></li>
  </ul>

Materialize Pagination