Native javascript pagination

This commit is contained in:
Oscar Cortez 2015-07-19 11:56:00 -06:00
parent 066dc91ded
commit d40858f14c

View file

@ -1,23 +1,23 @@
//$(".loadMore").click(loadMorePosts);
var _this = document.getElementById("js-load-more"); var _this = document.getElementById("js-load-more");
_this.onclick = loadMorePosts; _this.onclick = loadMorePosts;
var HttpClient = function() { var HttpClient = function() {
'use strict';
this.get = function(Url, Callback) { this.get = function(Url, Callback) {
var HttpRequest = new XMLHttpRequest(); var HttpRequest = new XMLHttpRequest();
HttpRequest.onreadystatechange = function() { HttpRequest.onreadystatechange = function() {
if (HttpRequest.readyState == 4 && HttpRequest.status == 200) if (HttpRequest.readyState == 4 && HttpRequest.status == 200)
Callback(HttpRequest.responseText); Callback(HttpRequest.responseText);
} };
HttpRequest.open("GET", Url, true); HttpRequest.open("GET", Url, true);
HttpRequest.send(null); HttpRequest.send(null);
} };
} };
Element.prototype.remove = function() { Element.prototype.remove = function() {
this.parentElement.removeChild(this); this.parentElement.removeChild(this);
} };
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() { NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
for (var i = this.length - 1; i >= 0; i--) { for (var i = this.length - 1; i >= 0; i--) {
@ -25,23 +25,20 @@ NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
this[i].parentElement.removeChild(this[i]); this[i].parentElement.removeChild(this[i]);
} }
} }
} };
function loadMorePosts() { function loadMorePosts() {
//var _this = document.getElementById("js-load-more"); var blogContainer = document.getElementById("js-post-container");
var blogContainer = document.getElementById("js-post-container"); //$("#js-post-container"); var nextPage = parseInt(blogContainer.dataset.page) + 1;
var nextPage = parseInt(blogContainer.dataset.page) + 1; //parseInt($blogContainer.attr("data-page")) + 1;
var totalPages = parseInt(blogContainer.dataset.totalPages); //parseInt($blogContainer.attr("data-totalPages"));
_this.className += " loading"; _this.className += " loading";
Client = new HttpClient(); Client = new HttpClient();
Client.get('/page' + nextPage, function(data) { Client.get('/page' + nextPage, function(data) {
parser = new DOMParser(); parser = new DOMParser();
var htmlData = parser.parseFromString(data, "text/html");; var htmlData = parser.parseFromString(data, "text/html");
var articles = htmlData.getElementsByTagName("article"); var articles = htmlData.getElementsByTagName("article");
console.log(articles); blogContainer.parentNode.insertBefore(articles[0], blogContainer.nextSibling);
blogContainer.innerHTML += data;
if (blogContainer.dataset.totalPages == nextPage) { if (blogContainer.dataset.totalPages == nextPage) {
document.getElementById("js-load-more").remove(); document.getElementById("js-load-more").remove();
@ -49,18 +46,4 @@ function loadMorePosts() {
_this.className = ""; _this.className = "";
}); });
// $.get("/page" + nextPage, function (data) {
// var htmlData = $.parseHTML(data);
// console.log(htmlData);
// var $articles = $(htmlData).find("article");
// blogContainer.attr("data-page", nextPage).append($articles);
// if (blogContainer.attr("data-totalPages") == nextPage) {
// $(".loadMore").remove();
// }
// $(_this).removeClass("loading");
// });
} }
//---- native js----