// HubDB Multiple Filters and Numbered Pagination without page reload (AJAX)

// html + hubl

<form class="form-horizontal" method="get">

<div class="form-cat-group">

<p>Nutzen Sie den Filter, um auf Ihre Bedürfnissen zugeschnitte Artikel anzuzeigen.</p>

<div class="form-group">

{% set types = hubdb_table_column(module.select_hubdb_table, "category").options %}

{% for choice in types %}

{% set type_list = type_list~choice.id|list %}

<label class="radio-inline" for="radios-{{ choice.id }}">

<input type="radio" name="category" id="radios-{{ choice.id }}" value="{{ choice.id }}">

<span>{{ choice.name }}</span>

</label>

{% endfor %}

</div>

</div>

<div class="form-sub-cat-group">

{% set types1 = hubdb_table_column(module.select_hubdb_table, "sub_category").options %}

<div class="filter-in-wrap">

<div class="filter-wrap">

{% for choice in types1 %}

{% set type_list = type_list~choice.id|list%}

<label class="checkbox-inline" for="checkboxes-{{ choice.id }}">

<input type="checkbox" name="sub_category" id="checkboxes-{{ choice.id }}" value="{{ choice.id }}" >

<span>{{ choice.name }}</span>

</label>

{% endfor %}

</div>

<div class="filter-all">

<button type="button" class="btn reset float-right">Alle Filter zurücksetzen</button>

</div>

</div>

</div>

</form>

{% if module.select_hubdb_table %}

{% set batch_num = 8 %}

{% if not request.query_dict.pno %}

{% set page_num = 1 %}

{% set offset_num = 0 %}

{% elif request.query_dict.pno %}

{% set page_num = request.query_dict.pno %}

{% set offset_num = page_num|add(-1) * batch_num %}

{% endif %}

{% set query = "orderBy=-hs_created_at&limit=" ~ batch_num ~ "&offset=" ~ offset_num %}

{% set query1 = "&offset=" ~ offset_num %}

{% set queryparam = "" %}

{% set queryparam1 = "" %}

{% set cat_queryparam = "" %}

{% set subcat_queryparam = "" %}

{% if not request.query_dict.category or request.query_dict.category == ''%}

{% set queryparam = "" %}

{% elif request.query_dict.category !='' %}

{% set cat_queryparam = cat_queryparam ~ "&category__in="~request.query_dict.category|urlencode %}

{% endif %}

{% if not request.query_dict.sub_category or request.query_dict.sub_category == ''%}

{% elif request.query_dict.sub_category or request.query_dict.sub_category !='' %}

{% set subcat_queryparam = subcat_queryparam ~ "&sub_category__in="~request.query_dict.sub_category|urlencode %}

{% endif %}

{% if cat_queryparam and not subcat_queryparam %}

{% set queryparam = query ~ cat_queryparam %}

{% elif subcat_queryparam and not cat_queryparam %}

{% set queryparam = query ~ subcat_queryparam %}

{% elif cat_queryparam and subcat_queryparam %}

{% set queryparam = query ~ cat_queryparam ~ subcat_queryparam %}

{% else %}

{% set queryparam = queryparam ~ query %}

{% endif %}

{% set queryparam1 = cat_queryparam ~ subcat_queryparam %}

{% set rows = hubdb_table_rows(module.select_hubdb_table, queryparam) %}

<div class="custom-event-grp-wrp">

<div class="custom-event-grp">

<div class="post-group clearfix">

{% for row in rows %}

<div class="post-items" data-cat="{% for tag in row.tags %} {{tag.name}} {% endfor %}" data-subcat="{% for sub_category in row.sub_category %} {{sub_category.name }} {% endfor %}">

<div class="post-items-content">

<div class="post-preview">

<div class="badge-wrap">

{% for tag in row.tags %}

{% if tag.name == "Xella" %}

<img class="ytong-service-label" alt="{{ tag.name }}" src="//cdn2.hubspot.net/hubfs/6311380/Xella_September2019_Theme/Images/logo_xella.jpg">

{% elif tag.name == "Ytong" %}

<img class="ytong-service-label" alt="{{ tag.name }}" src="//cdn2.hubspot.net/hubfs/6311380/Xella_September2019_Theme/Images/logo_ytong.jpg">

{% elif tag.name == "Silka" %}

<img class="ytong-service-label" alt="{{ tag.name }}" src="//cdn2.hubspot.net/hubfs/6311380/Xella_September2019_Theme/Images/logo_silka.jpg">

{% endif %}

{% endfor %}

</div>

<div class="image-slider" >

<a href="{{ row.read_now_link }}">

<img src="{{ row.featured_image.url }}" alt="{{ row.title }}">

</a>

</div>

</div>

<div class="post-content">

<h3 class="tile-headline color-brand text-uppercase"><a href="{{ row.read_now_link }}">{{ row.title }}</a></h3>

<h4 class="tile-subheadline">{{ row.sub_title }}</h4>

<p>{{ row.description }}</p>

<a href="{{ row.read_now_link }}" class="btn btn-lg btn-link tile-button"><span class="btn-arrow"></span>Jetzt lesen</a>

</div>

</div>

</div>

{% endfor %}

</div>

{% set nav = hubdb_table_rows(module.select_hubdb_table, queryparam1) %}

{% set pageLength = 8 %}

{% set catPage = request.query_dict.category %}

{% set subcatPage = request.query_dict.sub_category %}

{% set total_pages = (nav|length/pageLength)|round(0, 'ceil') %}

{% set more_pages = total_pages - page_num %}

<div class="btm-pagination">

<a class="previous-posts-link {% if page_num <= 1 %}disabled{% endif %} " href="{{ content.absolute_url }}?pno={{ page_num|add(-1) }}{% if catPage %}&category{{catPage}}{% endif %}{% if subcatPage %}&sub_category{{subcatPage}}{% endif %}" title="Next"><span aria-hidden="true"><i class="fa fa-angle-left"></i></span></a>

{% if more_pages == 0 %}

{% if page_num|add(-4) >= 1 -%} <a href="{{ content.absolute_url }}?pno={{ page_num|add(-4) }}{% if catPage %}&category{{catPage}}{% endif %}{% if subcatPage %}&sub_category{{subcatPage}}{% endif %}">{{ page_num|add(-4) }}</a>{% endif %}

{% endif %}

{% if more_pages <= 1 %}

{% if page_num|add(-3) >= 1 %}<a href="{{ content.absolute_url }}?pno={{ page_num|add(-3) }}{% if catPage %}&category{{catPage}}{% endif %}{% if subcatPage %}&sub_category{{subcatPage}}{% endif %}">{{ page_num|add(-3) }}</a>{% endif %}

{% endif %}

{% if page_num|add(-2) >= 1 %} <a href="{{ content.absolute_url }}?pno={{ page_num|add(-2) }}{% if catPage %}&category{{catPage}}{% endif %}{% if subcatPage %}&sub_category{{subcatPage}}{% endif %}">{{ page_num|add(-2) }}</a>{% endif %}

{% if page_num|add(-1) >= 1 %}<a href="{{ content.absolute_url }}?pno={{ page_num|add(-1) }}{% if catPage %}&category{{catPage}}{% endif %}{% if subcatPage %}&sub_category{{subcatPage}}{% endif %}">{{ page_num|add(-1) }}</a>{% endif %}

<a class="active" href="{{ content.absolute_url }}?pno={{ page_num }}{% if catPage %}&category{{catPage}}{% endif %}{% if subcatPage %}&sub_category{{subcatPage}}{% endif %}">{{ page_num }}</a>

{% if page_num|add(1) <= total_pages %}<a href="{{ content.absolute_url }}?pno={{ page_num|add(1) }}{% if catPage %}&category{{catPage}}{% endif %}{% if subcatPage %}&sub_category{{subcatPage}}{% endif %}">{{ page_num|add(1) }}</a>{% endif %}

{% if page_num|add(2) <= total_pages %}<a href="{{ content.absolute_url }}?pno={{ page_num|add(2) }}{% if catPage %}&category{{catPage}}{% endif %}{% if subcatPage %}&sub_category{{subcatPage}}{% endif %}">{{ page_num|add(2) }}</a>{% endif %}

{% if page_num <= 2 %}

{% if page_num|add(3) <= total_pages %}<a href="{{ content.absolute_url }}?pno={{ page_num|add(3) }}{% if catPage %}&category{{catPage}}{% endif %}{% if subcatPage %}&sub_category{{subcatPage}}{% endif %}">{{ page_num|add(3) }}</a>{% endif %}

{% endif %}

{% if page_num == 1 %}

{% if page_num|add(4) <= total_pages %}<a href="{{ content.absolute_url }}?pno={{ page_num|add(4) }}{% if catPage %}&category{{catPage}}{% endif %}{% if subcatPage %}&sub_category{{subcatPage}}{% endif %}">{{ page_num|add(4) }}</a>{% endif %}

{% endif %}

<a class="next-posts-link {% if total_pages <= page_num %}disabled {% endif %}" href="{{ content.absolute_url }}?pno={{ page_num|add(1) }}{% if catPage %}&category{{catPage}}{% endif %}{% if subcatPage %}&sub_category{{subcatPage}}{% endif %}" title="Older Posts"><span aria-hidden="true"><i class="fa fa-angle-right"></i></span></a>

</div>

</div>

</div>

{% endif %}

// JS

$('body').on('click', '.reset',function(){

$( ".listing-grpup" ).load("/vorteile" + " .listing-grpup > div", function( response, status, xhr ) {

});

});

$('body').on('change', '.form-horizontal .form-cat-group input',function(){

if (this.checked) {

var textVl = $(this).val();

var nm = "&" + $(this).attr('name') + "=";

var tt = nm + textVl;

$(this).parents('.form-cat-group').attr('data-val', tt);

if ($('.form-sub-cat-group').attr('data-val')==undefined) {

var tt = nm + textVl;

}else {

tt = tt + "&sub_category=" + $('.form-sub-cat-group').attr('data-val');

}

console.log(tt);

$( ".custom-event-grp-wrp" ).load(window.location.href + "?" + tt + " .custom-event-grp", function( response, status, xhr ) {

});

}

});

$('body').on('change','.form-horizontal .form-sub-cat-group input',function(){

var myCheckboxes = new Array();

$(".form-horizontal .form-sub-cat-group input:checked").each(function() {

myCheckboxes.push($(this).val());

});

var ab = "&" + $(this).attr('name') + "=" + myCheckboxes.join(',');

$(this).parents('.form-sub-cat-group').attr('data-val' , myCheckboxes.join(','));

var abc = "&" + $(this).attr('name') + "=";

if ($('.form-cat-group').attr('data-val')==undefined) {

ab = window.location.href + "?" + ab;

}else {

ab = $('.form-cat-group').attr('data-val') + ab

}

$( ".custom-event-grp-wrp" ).load(window.location.href + "?" + ab + " .custom-event-grp", function( response, status, xhr ) {

});

});

$('body').on('click',".disabled",function(){

return false

})

$('body').on('click',".btm-pagination a:not('.disabled')",function(e){

e.preventDefault();

abc = $(this).attr('href');

$(this).siblings().removeClass('active');

$(this).addClass('active');

$('.btm-pagination a[href="'+abc+'"]').siblings().removeClass('active');

$('.btm-pagination a[href="'+abc+'"]').addClass('active');

$('.previous-posts-link').removeClass('active');

$('a.next-posts-link').removeClass('active');

$( ".post-group" ).load(abc + " .post-items", function( response, status, xhr ) {

});

});