A set of navigational link to page extension or related content.
The best example is showing 10 records per page out of total 49 records. All records can be displayed by using 5 pages with navigational link to visit any page.
For the screen readers it is better to wrap the list within a NAV tag and add area-label. Here is the code.
<nav aria-label='There are 4 pages to Navigate'>
<ul class='pagination justify-content-center'>
<li class='page-item'><a class='page-link' href='#'>Previous</a></li>
.....
</ul>
</nav>
Disabled & Active
The link with current page should have active class and if we are at the last page then the link showing Next page should have class disabled ( un clickable ).
Similarly if are at the first page then the link showing previous page should be disabled or un-clickable.
The best example of pagination is while showing limited number of records per page out of the total records available in a database table.
We have 39 records to display and we are displaying 10 records per page. By using pagination we can display all records in 4 different pages with navigational link at the bottom of each page to visit any of the five pages.
We collect total number of records to be displayed ( here it is 39 ) and set number of records per page. The script will take care of all features like disable / enable links, finding out number of pages and links ,showing previous and next links by using PHP Script.
The source code with the demo is available here.