Create page navigation in HTML/Javascript
Question
I'm currently building a website that dynamically generates content into the index.html page, with option to filter. The problem is when it's not filtered, there could be up to 300 items. I would like to create a page navigation (like Yelp) that would let the user scroll to the next page after 10 items.
index.html
<div id="content"></div>
load.js
var content = document.getElementById('content');
for (var i=0; i<somthing.length; i++) {
var info = document.createElement('div');
info.className = "infobox";
info.textContent = "This is content #" + i;
content.appendChild(info);
}
Now my HTML should have all the generated content, but it would be a nightmare to scroll past this. How would I cut this down and have the option to navigate thru pages?
1 answers
solution1
0 2019-03-20 01:12:37
Here is the short pagination solution that should work:
<html> <script> function init() { var pageSize = 15; var content = document.getElementById('content'); for (var i = 0; i < 300;) { // Create page container var page = document.createElement('div'); content.appendChild(page); // Hide all content after first page if (i >= pageSize) page.style.display = "none"; for (;;) { var info = document.createElement('div'); info.className = "infobox"; info.textContent = "This is content #" + i; page.appendChild(info); // Quit when page size is reached if (i++ % pageSize == (pageSize - 1)) break; } // Create 'more' button var more = document.createElement('a'); more.href = '#'; more.textContent = "more..."; more.onclick = function(e) { this.nextSibling.style.display = "block"; this.style.display = "none"; } page.appendChild(more); content = page; } } </script> <body onload="init()"> <div id="content"></div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.