In this task, we will learn how to build pagination with Ajax functionality. That means we will be able to turn the page in the contact list without reloading the whole website.
We will start with HTML, which contains the page container, contact grid with the first displayed page of contacts, and the contact pagination:
<div id="pageContainer"> <div id="contactGrid"> <div class="contact"> <img src="images/avatar.png" alt="avatar" /> <h2>Milan Sedliak</h2> <p>Prague, Czech Republic</p> </div> <!-- // add more contacts --> <div class="contact"> <img src="images/avatar.png" alt="avatar" /> <h2>Milan Sedliak (home)</h2> <p>Malacky, Slovakia</p> </div> </div> <ul id="contactPagination"> <li><a href="#previous" id="previous">Previous</a></l ...