Last active
July 16, 2021 05:44
-
-
Save bradonomics/ab42dd473c602ceb713d6a56eeada2c1 to your computer and use it in GitHub Desktop.
Ajax LoadMore Pagination Button for Jekyll (https://eduardoboucas.com/blog/2014/11/05/adding-ajax-pagination-to-jekyll.html)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="wrap"> | |
<div id="container" class="wrap-inner" data-page="{{ currentPage }}" data-totalPages="{{ paginator.total_pages }}"> | |
{% assign posts = site.posts | where: "language", page.language %} | |
{% if paginator.page %} | |
{% assign offset = paginator.page | minus:1 | times:paginator.per_page %} | |
{% assign currentPage = paginator.page %} | |
{% else %} | |
{% assign offset = 0 %} | |
{% assign currentPage = 1 %} | |
{% endif %} | |
{% for post in site.posts limit:site.paginate offset:offset %} | |
<article class="post entry" itemscope itemtype="http://schema.org/CreativeWork"> | |
<header class="entry-header"> | |
<h2 class="entry-title" itemprop="headline"><a href="{{ post.url }}" rel="bookmark">{{ post.title }}</a></h2> | |
<p class="entry-meta"> | |
<time class="entry-time" itemprop="datePublished" datetime="{{ post.date | date_to_xmlschema }}">{% include post-time.html %}</time> | |
</p> | |
</header> | |
<div class="entry-content" itemprop="text"> | |
<a href="{{ post.url }}" aria-hidden="true"> | |
<div class="post-image"> | |
<img width="756" height="300" src="{% if post.featured_image_path %}{{ post.featured_image_path }}{% else %}/images/default.jpg{% endif %}" alt="{{ post.title }}" itemprop="image"> | |
</div> | |
</a> | |
<p>{{ post.content | strip_html | truncatewords: 60 }}</p> | |
</div> | |
</article> | |
{% endfor %} | |
{% assign postCount = site.posts | size %} | |
{% assign postsCovered = site.paginate | plus:offset %} | |
{% if postsCovered < postCount %} | |
<button id="loadmore" class="button loadmore">Load more posts</button> | |
{% endif %} | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$("#loadmore").click(loadMorePosts); | |
function loadMorePosts() { | |
var _this = this; | |
var $container = $("#container"); | |
var nextPage = parseInt($container.attr("data-page")) + 1; | |
var totalPages = parseInt($container.attr("data-totalPages")); | |
$(this).addClass("loading"); | |
$.get("/blog/page" + nextPage, function (data) { | |
var htmlData = $.parseHTML(data); | |
var $articles = $(htmlData).find("article"); | |
$container.attr("data-page", nextPage).append($articles); | |
if ($container.attr("data-totalPages") == nextPage) { | |
$("#loadmore").remove(); | |
} | |
$(_this).removeClass("loading"); | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'm trying to get this to work for multiple languages, but since the paginate plugin won't output the pages for more than one language it's not working. Any advice on getting pagination or a "load more" option to work for multi-language sites would be very welcome.