向同位素网格添加分页

如何解决向同位素网格添加分页

我希望为我的同位素网格 (https://isotope.metafizzy.co/layout-modes.html) 添加分页。我已经开始根据其他一些研究/我自己的知识将一些代码放在一起，但它似乎并没有打球。控制台中没有错误，但我知道这可能很明显。包含以下代码：

JS

jQuery(function ($) {
 
    var $container = $('#isotope-list'); //The ID for the list with all the blog posts
    $container.isotope({ //Isotope options,'item' matches the class in the PHP
        itemSelector : '.item',percentPosition: true,masonry: {
        // tell the layout to use the items we set up as sizing templates:
        columnWidth: '.item-sizer',gutter: '.gutter-sizer'
    }
    });
 
    //Add the class selected to the item that is clicked,and remove from the others
    var $optionSets = $('#filters'),$optionLinks = $optionSets.find('a');
 
    $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
      return false;
    }
    var $optionSet = $this.parents('#filters');
    $optionSets.find('.selected').removeClass('selected');
    $this.addClass('selected');
 
    //When an item is clicked,sort the items.
     var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });
 
    return false;
    });
 
});

jQuery(function ($) {
  var itemSelector = ".item"; 
  var $container = $('#isotope-list').isotope({ itemSelector: itemSelector });
  var itemsPerPageDefault = 4;
  var itemsPerPage = defineItemsPerPage();
  var currentNumberPages = 1;
  var currentPage = 1;
  var pageAttribute = 'data-page';
  var pagerClass = 'isotope-pager';

function setPagination() {
    
  var SettingsPagesOnItems = function(){
      var itemsLength = $container.isotope(itemSelector).length;
      var pages = Math.ceil(itemsLength / itemsPerPage);
      var item = 1;
      var page = 1;
      var selector = itemSelector;
      var exclusives = [];
          // for each box checked,add its value and push to array
          $checkboxes.each(function (i,elem) {
              if (elem.checked) {
                  selector += ( currentFilter != '*' ) ? '.'+elem.value : '';
                  exclusives.push(selector);
              }
          });
          // smash all values back together for 'and' filtering
          filterValue = exclusives.length ? exclusives.join('') : '*';
          // find each child element with current filter values
          $container.isotope(filterValue).each(function(){
              // increment page if a new one is needed
              if( item > itemsPerPage ) {
                  page++;
                  item = 1;
              }
              // add page number to element as a class
              wordPage = page.toString();
              
              var classes = $(this).attr('class').split(' ');
              var lastClass = classes[classes.length-1];
              // last class shorter than 4 will be a page number,if so,grab and replace
              if(lastClass.length < 4){
                  $(this).removeClass();
                  classes.pop();
                  classes.push(wordPage);
                  classes = classes.join(' ');
                  $(this).addClass(classes);
              } else {
                  // if there was no page number,add it
                 $(this).addClass(wordPage); 
              }
              item++;
          });
      currentNumberPages = page;
  }();

  // create page number navigation
  var CreatePagers = function() {

      var $isotopePager = ( $('.'+pagerClass).length == 0 ) ? $('<div class="'+pagerClass+'"></div>') : $('.'+pagerClass);

      $isotopePager.html('');
      if(currentNumberPages > 1){
        for( var i = 0; i < currentNumberPages; i++ ) {
            var $pager = $('<a href="javascript:void(0);" class="pager" '+pageAttribute+'="'+(i+1)+'"></a>');
                $pager.html(i+1);

                $pager.click(function(){
                    var page = $(this).eq(0).attr(pageAttribute);
                    goToPage(page);
                });
            $pager.appendTo($isotopePager);
        }
      }
      $container.after($isotopePager);
  }();
}
// remove checks from all boxes and refilter
function clearAll(){
  $checkboxes.each(function (i,elem) {
      if (elem.checked) {
          elem.checked = null;
      }
  });
 currentFilter = '*';
 setPagination();
 goToPage(1);
}

setPagination();
goToPage(1);

//event handlers
$checkboxes.change(function(){
  var filter = $(this).attr(filterAttribute);
  currentFilter = filter;
  setPagination();
  goToPage(1);
});
});

和 HTML：

<section class="discover-grid">
<?php $the_query = new WP_Query( 'posts_per_page=4' ); ?>
<?php if ( $the_query->have_posts() ) : ?>
    <div id="isotope-list">

    <div class="item-sizer"></div>
    <div class="gutter-sizer"></div>

    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
    $termsArray = get_the_terms( $post->ID,"category" );
    $heading = get_field( 'post_heading',$post_id );
    $subheading = get_field( 'post_subheading',$post_id );
    $termsString = ""; //initialize the string that will contain the terms
        foreach ( $termsArray as $term ) { // for each term 
            $termsString .= $term->slug.' '; //create a string that has all the slugs 
        }
    ?> 

    <div class="<?php echo $termsString; ?> item" style="background: url('<?php the_post_thumbnail_url(); ?>')">
                                            <a href="<?php the_permalink(); ?>">
                                <div class="overlay">
                                    <div class="inner-overlay">
                                        <div class="overlay-text-wrapper">
                                            <div class="top-title"><?php echo esc_html( $heading ); ?></div>
                                            <div class="bottom-title"><?php echo esc_html( $subheading ); ?></div>
                                        </div>

                                    </div>

                                </div>
                            </a>
    </div> <!-- end item -->
    <?php endwhile;  ?>
    </div> <!-- end isotope-list -->
<?php endif; ?>

</section>

任何帮助将不胜感激！