Native javascript pagination
This commit is contained in:
parent
066dc91ded
commit
d40858f14c
1 changed files with 24 additions and 41 deletions
37
js/site.js
37
js/site.js
|
|
@ -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----
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue