Come implementare Isotopo con Paginazione

Question

Sto cercando di implementare l'isotopo con impaginazione sul mio sito WordPress (che ovviamente è un problema per molte persone). Ho ideato uno scenario che potrebbe funzionare se riesco a capire alcune cose.

sulla mia pagina, ho questa parte del mio script isotopo -

$('.goforward').click(function(event) { 
    var href = $(this).attr('href'); 
    $('.isotope').empty(); 
    $('.isotope').load(href +".html .isotope > *"); 
    $('div.box').addClass('isotope-item'); 
    $container.append($items).isotope('insert', $items, true); 
    event.preventDefault(); 
}); 

Poi sto usando questa funzione impaginazione, che ho modificato dal here di avere la classe 'GoForward' -

function isotope_pagination($pages = '', $range = 2) 
{ 
    $showitems = ($range * 2)+1; 

    global $paged; 
    if(empty($paged)) $paged = 1; 

    if($pages == '') 
    { 
     global $wp_query; 
     $pages = $wp_query->max_num_pages; 
     if(!$pages) 
     { 
      $pages = 1; 
     } 
    } 

    if(1 != $pages) 
    { 
     echo "<div class='pagination'>"; 
     for ($i=1; $i <= $pages; $i++) 
     { 
      if (1 != $pages &&(!($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems)) 
      { 
       echo ($paged == $i)? "<a href='".get_pagenum_link($i)."' class='inactive goforward'>".$i."</a>":"<a href='".get_pagenum_link($i)."' class='inactive goforward' >".$i."</a>"; 
      } 
     } 
     echo "</div>\n"; 
    } 
} 

1o problema - Sto riscontrando problemi con il filtro/l'ordinamento. Filtra bene per la prima pagina, ma non ordina. Nella seconda pagina o in qualsiasi altra pagina caricata, non aggiunge/inserisce o persino filtra/ordina quando si inizia nuovamente su quella pagina. Invece, quando si cerca di fare in modo che mi dà questo errore -

Uncaught TypeError: Cannot read property '[object Array]' of undefined 

2 ° Problema - Quando si carica i frammenti di pagina, c'è un ritardo e la pagina corrente è ancora visibile prima del prossimo frammento di pagina viene caricata in il suo posto.

So che molte persone hanno problemi con l'isotopo e l'impaginazione, di solito, finiscono per usare lo scroll infinito anche se l'autore isotopo non lo consiglia.

Quindi la mia teoria sta caricando il contenuto tramite load() e ha un callback di qualche tipo per visualizzare solo gli elementi filtrati.

Qualche idea su come raggiungere questo obiettivo?

Tutta la mia sceneggiatura isotopo ---

$(function() { 
    var selectChoice, updatePageState, updateFiltersFromObject, 
    $container = $('.isotope'); 
    $items = $('.item'); 

    //////////////////////////////////////////////////////////////////////////////////// 
    /// EVENT HANDLERS 
    //////////////////////////////////////////////////////////////////////////////////// 
     ////////////////////////////////////////////////////// 
     // Mark filtering element as active/inactive and trigger filters update 
     $('.js-filter').on('click', '[data-filter]', function (event) { 
      event.preventDefault(); 
      selectChoice($(this), {click: true}); 
      $container.trigger('filter-update'); 
     }); 
     ////////////////////////////////////////////////////// 
     // Sort filtered (or not) elements 
     $('.js-sort').on('click', '[data-sort]', function (event) { 
      event.preventDefault(); 
      selectChoice($(this), {click: true}); 
      $container.trigger('filter-update'); 
     }); 
     ////////////////////////////////////////////////////// 
     // Listen to filters update event and update Isotope filters based on the marked elements 
     $container.on('filter-update', function (event, opts) { 
      var filters, sorting, push; 
      opts = opts || {}; 
      filters = $('.js-filter li.active a:not([data-filter="all"])').map(function() { 
      return $(this).data('filter'); 
      }).toArray(); 
      sorting = $('.js-sort li.active a').map(function() { 
      return $(this).data('sort'); 
      }).toArray(); 
      if (typeof opts.pushState == 'undefined' || opts.pushState) { 
      updatePageState(filters, sorting); 
      } 
      $container.isotope({ 
      filter: filters.join(''), 
      sortBy: sorting 
      }); 

     }); 
     ////////////////////////////////////////////////////// 
     // Set a handler for history state change 
     History.Adapter.bind(window, 'statechange', function() { 
      var state = History.getState(); 
      updateFiltersFromObject(state.data); 
      $container.trigger('filter-update', {pushState: false}); 
     }); 
     //////////////////////////////////////////////////////////////////////////////////// 
     /// HELPERS FUNCTIONS 
     //////////////////////////////////////////////////////////////////////////////////// 
     ////////////////////////////////////////////////////// 
     // Build an URI to get the query string to update the page history state 
     updatePageState = function (filters, sorting) { 
      var uri = new URI(''); 
      $.each(filters, function (idx, filter) { 
      var match = /^\.([^-]+)-(.*)$/.exec(filter); 
      if (match && match.length == 3) { 
       uri.addSearch(match[1], match[2]); 
      } 
      }); 
      $.each(sorting, function (idx, sort) { 
      uri.addSearch('sort', sort); 
      }); 
      History.pushState(uri.search(true), null, uri.search() || '?'); 
     }; 
     ////////////////////////////////////////////////////// 
     // Select the clicked (or from URL) choice in the dropdown menu 
     selectChoice = function ($link, opts) { 
      var $group = $link.closest('.btn-group'), 
       $li = $link.closest('li'), 
       mediumFilter = $group.length == 0; 
      if (mediumFilter) { 
      $group = $link.closest('.js-filter'); 
      } 

      if (opts.click) { 
      $li.toggleClass('active'); 
      } else { 
      $li.addClass('active'); 
      } 
      $group.find('.active').not($li).removeClass('active'); 
      if (!mediumFilter) { 
      if ($group.find('li.active').length == 0) { 
       $group.find('li:first-child').addClass('active'); 
      } 
      $group.find('.selection').html($group.find('li.active a').first().html()); 
      } 
     }; 
     ////////////////////////////////////////////////////// 
     // Update filters by the values in the current URL 
     updateFiltersFromObject = function (values) { 
      if ($.isEmptyObject(values)) { 
      $('.js-filter').each(function() { 
       selectChoice($(this).find('li').first(), {click: false}); 
      }); 
      selectChoice($('.js-sort').find('li').first(), {click: false}); 
      } else { 
      $.each(values, function (key, val) { 
       val = typeof val == 'string' ? [val] : val; 
       $.each(val, function (idx, v) { 
       var $filter = $('[data-filter=".' + key + '-' + v + '"]'), 
        $sort = $('[data-sort="' + v + '"]'); 
       if ($filter.length > 0) { 
        selectChoice($filter, {click: false}); 
       } else if ($sort.length > 0) { 
        selectChoice($sort, {click: false}); 
       } 
       }); 
      }); 
      } 
     }; 
     //////////////////////////////////////////////////////////////////////////////////// 
     /// Initialization 
     //////////////////////////////////////////////////////////////////////////////////// 
     ////////////////////////////////////////////////////// 
     // Initialize Isotope 
    $container.imagesLoaded(function(){ 
     $container.isotope({ 
      masonry: { resizesContainer: true }, 
      itemSelector: '.item', 
      getSortData: { 
       date: function (itemElem) { 
        var date = $(itemElem).find('.thedate').text(); 
        return parseInt(date.replace(/[\(\)]/g, '')); 
       }, 
      area: function(itemElem) { // function 
       var area = $(itemElem).find('.thearea').text(); 
       return parseInt(area.replace(/[\(\)]/g, '')); 
      }, 
      price: function(itemElem) { // function 
       var price = $(itemElem).find('.theprice').text(); 
       return parseInt(price.replace(/[\(\)]/g, '')); 
      } 
     } 
    }); 

    var total = $(".next a:last").html(); 
    var pgCount = 1; 
    var numPg = total; 
    pgCount++; 

    $('.goback').click(function() { 
     $('.isotope').empty(); 
     $('.isotope').load("/page/<?php echo --$paged;?>/?<?php echo $_SERVER["QUERY_STRING"]; ?>.html .isotope > *"); 
     $container.append($items).isotope('insert', $items, true); 
     $('div.box').addClass('isotope-item'); 
    }); 

    $('.goforward').click(function(event) { 
     var href = $(this).attr('href'); 
     $('.isotope').empty(); 
     $('.isotope').load(href +".html .isotope > *"); 
     $('div.box').addClass('isotope-item'); 
     $container.append($items).isotope('insert', $items, true); 
     event.preventDefault(); 
    }); 
}); 
     ////////////////////////////////////////////////////// 
     // Initialize counters 
     $('.stat-count').each(function() { 
      var $count = $(this), 
       filter = $count.closest('[data-filter]').data('filter'); 
      $count.html($(filter).length); 
     }); 
     ////////////////////////////////////////////////////// 
     // Set initial filters from URL 
     updateFiltersFromObject(new URI().search(true)); 
     $container.trigger('filter-update', {pushState: false}); 
     }); 
}); 

Answer 1

Controlla qui sotto link se utile

https://mixitup.kunkalabs.com/extensions/pagination/ 

È inoltre possibile utilizzare loder pigri per l'impaginazione.

Spero che questo vi aiuterà a

Answer 2

<a href="http://codepen.io/Igorxp5/pen/ojJLQE"></a>

Credo che questo vi aiuterà.

consultare questo URL

Answer 3

Avete controllato il seguente link:

https://codepen.io/Igorxp5/pen/ojJLQE

Ha un esempio funzionante di isotopo con impaginazione.

Dai un'occhiata al seguente blocco di codice nella sezione JS in particolare.

var $container = $('#container').isotope({ 
     itemSelector: itemSelector, 
     masonry: { 
      columnWidth: itemSelector, 
      isFitWidth: true 
     } 
    }); 

Answer 4

codepen.io/Igorxp5/pen/ojJLQE

Questo funziona per me solo un po 'di domande Come aggiungere next/prev all'impaginazione e come aggiungere la classe attiva all'impaginazione?

e l'ultima cosa "manca o è malformata". questo testo appare dopo il mio menu di impaginazione Non so cosa significhi.