Подтвердить что ты не робот

Как реализовать изотоп с разбиением на страницы

Я пытаюсь реализовать изотоп с разбиением на страницы на моем сайте WordPress (что, очевидно, является проблемой для большинства людей). Я придумал сценарий, который может работать, если я могу понять несколько вещей.

На моей странице у меня есть эта часть моего изотопа script -

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

Затем я использую эту функцию разбиения на страницы, которую я изменил из здесь, чтобы иметь класс "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";
     }
}

Первая проблема. У меня проблемы с фильтрацией/сортировкой. Он отлично фильтрует первую страницу, но не сортирует. На второй странице или на любой другой загруженной странице она не добавляет/вставляет или даже фильтрует/сортирует при запуске на этой странице. Вместо этого при попытке сделать это он дает мне эту ошибку -

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

Вторая проблема. При загрузке фрагментов страницы существует задержка, и текущая страница все еще отображается до того, как на нее будет загружен фрагмент следующей страницы.

Я знаю, что у многих людей проблемы с изотопом и разбиением на страницы, как правило, заканчиваются бесконечным прокруткой, хотя автор изотопов не рекомендует его.

Итак, моя теория загружает контент через load() и имеет обратный вызов какого-то типа, чтобы отображать только фильтрованные элементы.

Любые идеи о том, как достичь этого?

Весь мой изотоп script ---

$(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});
      }); 
});
4b9b3361

Ответ 1

Проверьте ссылку ниже, если полезно

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

Вы также можете использовать ленивый loder для разбивки на страницы.

Надеюсь, это поможет вам

Ответ 2

Вы проверили следующую ссылку:

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

У него есть рабочий пример изотопа с нумерацией страниц.

Взгляните на следующий блок кода из раздела JS:

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

Ответ 3

codepen.io/Igorxp5/pen/ojJLQE

Это отлично работает для меня всего лишь несколько вопросов. Как добавить следующий /prev к разбивке на страницы и как добавить активный класс к разбивке на страницы?

и последнее, что "отсутствует или искажено". этот текст появляется после моего меню разбиения на страницы, я не знаю, что это значит.

Ответ 4

ленивый загрузчик работает довольно хорошо, я сам попробовал проверьте кодовый блок

Вы также можете попробовать:

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

Ответ 5

<a href="#" onclick="location.href='http://codepen.io/Igorxp5/pen/ojJLQE'; return false;"></a>