Wie man Isotope mit Paginierung implementiert

Question

Ich versuche, Isotop mit Paginierung auf meiner WordPress-Website zu implementieren (was offensichtlich ein Problem für die meisten Menschen ist). Ich habe ein Szenario entwickelt, das funktionieren könnte, wenn ich ein paar Dinge herausfinden könnte.

Auf meiner Seite habe ich diesen Teil meines Isotop Skript -

$('.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(); 
}); 

Dann habe ich diese Paginierung Funktion verwende, die ich von here modifiziert, um die ‚GoForward‘ Klasse zu haben -

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"; 
    } 
} 

1. Problem - Ich habe Probleme mit der Filterung/Sortierung. Es filtert für die erste Seite, sortiert aber nicht. Auf der zweiten Seite oder einer anderen geladenen Seite wird nicht angehängt/eingefügt oder sogar gefiltert/sortiert, wenn auf dieser Seite neu gestartet wird. Stattdessen, wenn dies zu tun versuchen, es gibt mir diesen Fehler -

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

2. Problem - Wenn die Seite Fragmente Laden, gibt es eine Verzögerung und die aktuelle Seite noch sichtbar ist, bevor die nächste Seite Fragment in geladen wird seinen Platz.

Ich kenne eine Menge Leute haben Probleme mit Isotop und Paginierung, in der Regel am Ende mit unendlichen Blättern, obwohl Isotop-Autor es nicht empfehlen.

Also meine Theorie lädt Inhalt über load() und haben einen Rückruf von einer Art, nur gefilterte Elemente anzuzeigen.

Irgendwelche Ideen, wie man das erreicht?

Mein ganzes Isotop Skript ---

$(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

prüfen Link unten, wenn nützlich

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

können Sie auch faul Loder für Paginierung verwenden.

Hope this finden Sie

Answer 2

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

helfen Ich denke, das wird Ihnen helfen.

Siehe diese URL

Answer 3

Haben Sie den folgenden Link geprüft:

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

Es hat ein funktionierendes Beispiel für Isotop mit Paginierung.

Werfen Sie einen Blick auf den folgenden Codeblock im Abschnitt JS.

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

Answer 4

Codepen.io/Igorxp5/pen/ojJLQE

Das ist Arbeit gut für mich nur ein kleines bisschen Fragen Wie Hinzufügen von nächsten/vor dem Seitenumbruch und wie aktive Klasse zu Seitenumbruch hinzufügen?

und das letzte, was "fehlt oder falsch ist." Dieser Text erscheint nach meinem Paginierungsmenü Ich weiß nicht, was es bedeutet.