0

I would like to create a simple pagination without a database using PHP. Is it possible to paginate what I have so far without a database? If so, could someone please point to a tutorial or something?

https://codepen.io/anon/pen/vZGerv

HTML

 <div> 1 </div>
 <div> 2 </div>
 <div> 3 </div>
 <div> 4 </div>
 <div> 5 </div>
 <div> 6 </div>
 <div> 7 </div>
 <div> 8 </div>
 <div> 9 </div>
 <div> 10</div>
 <div> 11</div>
 <div> 12</div>
 <a href="#" id="loadMore">Next Page</a>

CSS

body {
background-color: #f6f6f6;
width: 400px;
margin: 60px auto;
margin-top: 5px;
font: normal 13px/100% sans-serif;
color: #444;
}
div {
display:none;
padding: 10px;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #fff;
box-shadow: 0 1px 1px #ccc;
margin-bottom: 5px;
background-color: #f1f1f1;
}
.totop {
position: fixed;
bottom: 10px;
right: 20px;
}
.totop a {
display: none;
}
a, a:visited {
color: #33739E;
text-decoration: none;
display: block;
margin: 10px 0;
}
a:hover {
text-decoration: none;
}
#loadMore {
padding: 10px;
text-align: center;
background-color: #33739E;
color: #fff;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #fff;
box-shadow: 0 1px 1px #ccc;
}
#loadMore:hover {
background-color: #fff;
color: #33739E;
}

JS

(function() {
var divElements = [].slice.call(document.querySelectorAll("div"));
var loadMore = document.querySelector('#loadMore');
var divNumber = 2;

loadMore.addEventListener('click', function(e) {
    e.preventDefault();
    for (var i = 0; i < divNumber; i++) {
    window.scrollTo(0,document.body.scrollHeight);
        if (i < divElements.length) {
            divElements[i].style.display = 'block';
        }

        if (i >= divElements.length) {
            loadMore.innerHTML = "Load Completed";
            return;
        }

    }
    divElements.splice(0, divNumber);

});
})();
loadMore.click();
Mason Peace
  • 93
  • 1
  • 10
  • 1
    what do you mean? – Medda86 Jun 11 '17 at 17:13
  • something like this but without MySQL. https://code.tutsplus.com/tutorials/how-to-paginate-data-with-php--net-2928 – Mason Peace Jun 11 '17 at 17:15
  • yeah you dont need a database, if you have all data stored in a file or something. You ca render parts of it. Please be more specific if you need help with some code. – Medda86 Jun 11 '17 at 17:21
  • you might wanna look into history.pushState and js stuff like that :) – Medda86 Jun 11 '17 at 17:46
  • There are many answers already on Stack Overflow that provide client-side pagination examples. A good answer by @Populus can be found https://stackoverflow.com/a/25435422/4977402 – Sotiris Kiritsis Jun 11 '17 at 19:45

0 Answers0