Fatch Data From HubDB (Filter With Load More) Using Ajax

<!-- HubDB Html -->

{% set tableId = 847400 %}

<div class="row-fluid">  

  {% set types = hubdb_table_column(847400, "tag").options %}

  <ul class="tag_list resources-tags">

    <li value="all"><a class="tagall" href="{{ request.path }}">All</a></li>

    {% for row in hubdb_table_rows(tableId)|unique('tag_name')|sort(False, False, 'tag_name') %}

    {% if row.tag_name %}

        <li><a class="tag-filter" href="{{ request.path }}?tag={{ row.tag_name }}&page=1">{{ row.tag_name }}</a></li>

      {% endif %}

{% endfor %}

  </ul>

</div>

{% set page_size = 10 %} {# Define Page Size Here #}

{% set rowCount = hubdb_table(tableId).row_count %}

{% set pageCount =(rowCount/page_size)|round(0, 'ceil') %}

{% if request.query_dict.page %}

{% set page_num = request.query_dict.page|int %}

{% else %}

{% set page_num = 1 %}

{% endif %}

{% set offsetNum = (page_num-1)*page_size  %}

<!-- <h1>{{ request.query_dict.tag }}</h1> -->

{% if request.query_dict.tag and request.query_dict.tag != "All" %}  

{% set filteredSeries = request.query_dict.tag|urlencode %} 

{% set searchfilterData = '&tag_name__eq='+filteredSeries %}

{% set searchProductsList = hubdb_table_rows(tableId,searchfilterData) %}

{% set rowCount = searchProductsList|length %}

{% set pageCount =(rowCount/page_size)|round(0, 'ceil') %}

{% set filterData = '&tag_name__eq='+filteredSeries+'&offset='+offsetNum+'&limit='+page_size %}

{% else %}

{% set searchfilterData = '&tag_name__not_null=' %}

{% set filterData = 'offset='+offsetNum+'&limit='+page_size %}

{% endif %}

{% set productsList = hubdb_table_rows(tableId,filterData) %}

<div class="productsList resources-items-wrapper clearfix">

{% for product in productsList %}

 

  <a class="resources-item product_item" href="{{ product.url }} ">

<div class="inner-resources-item clearfix">

          <div class="resources-image">

            <img src="{{ product.image.url }}" {% if product.image.width > product.image.height  %} class="landscape"{% endif %} alt="{{ product.name }} Headshot">

          </div>

          <div class="resources-content-wrapper">

            <span class="resources-tag">{{ product.tag_name }}</span>

            <h3 class="resources-heading">{{ product.heading }}</h3>

            <p class="resources-content">{{ product.content }}</p>

          </div>

        </div>

  </a>

  

{% endfor %}

  <div id="productsList" class="productsListInner">

  </div>

</div>

{% set last_page = page_num - 1 %}

{% if page_num <= 1 %}

{% set last_page = "" %}

{% endif %}

{% set next_page = page_num + 1 %}

{% if page_num >= pageCount %}

{% set next_page = "" %}

{% endif %}

{% set paginationPath = request.path+'?page=' %}

{% if request.query_dict.tag %}  

{% set paginationPath = request.path+'?tag='+request.query_dict.tag+'&page=' %}

{% endif %}

  <div class="table-pagination resources-pagination">

  {% set page_list = [-2, -1, 0, 1, 2] %}

  {% if pageCount - page_num == 1 %}{% set offset = -1 %}

  {% elif pageCount - page_num == 0 %}{% set offset = -2 %}

  {% elif page_num == 2 %}{% set offset = 1 %}

  {% elif page_num == 1 %}{% set offset = 2 %}

  {% else %}{% set offset = 0 %}{% endif %}

  {% if next_page %}

    <a class="next-link resources-load-more" data-total-page-count="{{ pageCount }}" href="{{ paginationPath }}{{ next_page }}">Load more posts</a>

     

  {% endif %}

</div>

<!-- js -->

$('a.tag-filter').click(function(e2){

  e2.preventDefault();

  var targetPage2 = $(this).attr('href');

  $(".productsList").load(targetPage2+" .productsList .product_item",function(){

  $('<div id="productsList" class="productsListInner"> </div>').appendTo('.productsList');

  });

  /*$("#productsList").load(targetPage2+" .productsList .product_item",function(){

    $('.productsListInner .product_item').insertBefore('.productsListInner');

  });*/

  

  $(".table-pagination").load(targetPage2+" a.next-link");

});

$('a.tagall').click(function(e3){

  e3.preventDefault();

  var targetPage3 = $(this).attr('href');

  $(".productsList").load(targetPage3+" .productsList .product_item",function(){

    $('<div id="productsList" class="productsListInner"> </div>').appendTo('.productsList');

  });

  $(".table-pagination").load(targetPage3+" a.next-link");

});

$(document).on('click',"a.next-link",function(e){

  e.preventDefault();

  var targetPage = $(this).attr('href');

  $("#productsList").load(targetPage+" .productsList .product_item",function(){

    $('.productsListInner .product_item').insertBefore('.productsListInner');

  });

  

  $(".table-pagination").load(targetPage+" a.next-link",function(){

    //$('.productsListInner .product_item').insertBefore('.productsListInner');

  });

  return false;

});

$('ul.resources-tags li[value="all"]').addClass('active');

$('ul.resources-tags li a').click(function(){

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

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

});