Skip to content
Related Articles

Related Articles

How to we create Pagination in Materialize CSS ?

Improve Article
Save Article
  • Last Updated : 04 Oct, 2021
Improve Article
Save Article

Materialize CSS is a front-end UI library that is created by Google using the combination of HTML, CSS, and JavaScript. It is basically a design language that combines classic design along with modern innovations and technology. The purpose of Google behind developing Materialize CSS is to provide a unified system design for all their products across the internet. Materialize CSS is also known as Material Design.

In this article, we will discuss one such very useful component that can be found in almost all the websites, i.e. pagination. Pagination is seen in multiple websites and the most common example is doing Google Search. You can see the pagination tab like the one shown above at the bottom of every Google search page. Pagination helps to display a huge amount of data in a better way. 

Let’s understand this with the help of an example: Suppose you have searched for mobile phones on the Amazon website, now, Amazon has thousands of mobile phones to display which cannot be displayed on a single screen and if it displays all the options a single web page, it will become very long and the user has to do a very hectic scrolling and gives the user or customer a very bad experience. Instead of that, we can display suppose 20 mobile phones on each page and make pagination at the end so that the user can navigate through them.

Now, let’s understand how to use pagination by using Materialize CSS. Let’s add the Pagination code for this page with the following syntax.

 

Syntax:

<ul class="pagination">
    <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="#!">4</a></li>
    <li class="waves-effect"><a href="#!">5</a></li>
</ul>

Now, by default, all the button does not have any URL are not linked to any page. We can link each of the page buttons with a different page and also increase or decrease the no. of pages by either increasing or decreasing the no. of list items.

Now, here is an example of basic pagination that we have created with 4 pages:

  • If we click on page no., the subsequent page is navigated.
  • The page which is clicked gets highlighted.

Example: In the below example, we will be creating 3 files that can be accessed using navigation.

page1.html




<!DOCTYPE html>
<html>
  
<head>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
  
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
</head>
  
<body class="container">
    <h1>Hello World</h1>
    <h2>Page One</h2>
    <ul class="pagination">
        <li class="waves-effect active">
          <a href="/page1.html">1</a>
        </li>
        <li class="waves-effect">
          <a href="/page2.html">2</a>
        </li>
        <li class="waves-effect">
          <a href="/page3.html">3</a>
        </li>
    </ul>
</body>
  
</html>


page2.html




<!DOCTYPE html>
<html>
  
<head>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
  
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
</head>
  
<body class="container">
    <h1>Hello World</h1>
    <h2>Page Two</h2>
    <ul class="pagination">
        <li class="waves-effect">
          <a href="/page1.html">1</a>
        </li>
        <li class="waves-effect active">
          <a href="/page2.html">2</a>
        </li>
        <li class="waves-effect">
          <a href="/page3.html">3</a>
        </li>
    </ul>
</body>
  
</html>


page3.html




<!DOCTYPE html>
<html>
  
<head>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
  
    <!-- Compiled and minified JavaScript -->
    <script src=
      </script>
</head>
  
<body class="container">
    <h1>Hello World</h1>
    <h2>Page Three</h2>
    <ul class="pagination">
        <li class="waves-effect">
          <a href="/page1.html">1</a>
        </li>
        <li class="waves-effect">
          <a href="/page2.html">2</a>
        </li>
        <li class="waves-effect active">
          <a href="/page3.html">3</a>
        </li>
    </ul>
</body>
  
</html>


Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!