How to we create Pagination in Materialize CSS ?
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.
<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.