Многофункциональность фильтрации и нумерация страниц

Question

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

Ниже приведен мой сценарий. Я чувствую, что это нечто простое, что я не могу понять.

//show hide filters options
  $('.filterLabel').on('click',function(){
event.preventDefault();
$(this).next().slideToggle();
$(this).toggleClass('open');
  });

// store filter for each group
  var buttonFilters = {};
  var buttonFilter;

// store search result
  var qsRegex;

//home search link
  var $a = $('a[name="keywordSearch"]');

  $a.data('href', $a.attr('href'))
$('#keyword').change(function () {
$a.attr('href', $a.data('href') + '?search=' + this.value)
});
  $('#keyword').keyup(function(event) {
    if (event.keyCode === 13) {
      $('a[name="keywordSearch"]').click();
    }
  });

// input from homepage
  var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');

if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
}
    }
  };

//fill var w/home input
  var homeSearch = getUrlParameter('search');

  //replace search w/home input
  if (homeSearch) {
    qsRegex = new RegExp( homeSearch, 'gi' );;
  }

  $('#quicksearch').val(homeSearch);
// end input from homepage

// init Isotope
  var $grid = $('.grid').isotope({
transitionDuration: 0,
//stagger: 10,
itemSelector: '.position',
layoutMode : 'vertical',
filter: function() {
//console.log( filteredItems.length );
var $this = $(this);
var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
return searchResult && buttonResult;
},
  });

// for Internship page only
  if (homeSearch == 'Internship') {
    $grid.isotope({ filter: '.internship' });
  }
// filter by select
  $('.filters').on( 'click', '.button', function() {
var $this = $(this);

// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');

// set filter for group
buttonFilters[ filterGroup ] = $this.attr('data-filter');

// combine filters
buttonFilter = concatValues( buttonFilters );

setPagination();
goToPage(1);
// Isotope arrange
//$grid.isotope();

// close group
$(this).parent().prev('.filterLabel').toggleClass('open');
$(this).parent().slideToggle();
  });

// use value of search field to filter
  var $quicksearch = $('#quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
/*TODO: UPDATE THIS SCRIPT TO ACCOMODATE FOR PAGINATION
setPagination();
goToPage(1);*/
  })
  );


// change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'div', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
  });

// flatten object by concatting values
  function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
  }

// debounce so filtering doesn't happen every millisecond
  function debounce( fn, threshold ) {
    var timeout;
    threshold = threshold || 100;
    return function debounced() {
      clearTimeout( timeout );
      var args = arguments;
      var _this = this;
      function delayed() {
        fn.apply( _this, args );
      }
      timeout = setTimeout( delayed, threshold );
    };
  }

// get Isotope instance
  var iso = $grid.data('isotope');

// alternate gray bg
  iso.filteredItems.forEach( function( item, i ) {
if ( i % 2 === 1 ) {
$( item.element ).toggleClass('gray');
}
  });

// actions once filtered
  $grid.on( 'arrangeComplete', function( event, filteredItems ) {


// remove gray bg
iso.filteredItems.forEach( function( item, i ) {
$( item.element ).removeClass('gray');
});

// alternate gray bg after filtered
iso.filteredItems.forEach( function( item, i ) {
if ( i % 2 === 1 ) {
$( item.element ).toggleClass('gray');
}
});

//clear error message if showing
$('.no-results').hide();

//error message
if(filteredItems.length == 0){
$('.no-results').show();
    }else{
$('.no-results').hide();
    }
});

  var results = $grid.isotope('getFilteredItemElements');
  //console.log (results);
  if(results.length == 0){
    $('.no-results').show();
  }else{
    $('.no-results').hide();
    }

//New Pagination Script
var itemSelector = ".position";
        var $filterdropdowns = $('.filter');
        //Defined by $grid
//var $container = $('#products').isotope({ itemSelector: itemSelector });

        //Ascending order
        var responsiveIsotope = [ [480, 4] , [720, 6] ];
        var itemsPerPageDefault = 10;
        var itemsPerPage = 10;
        var currentNumberPages = 1;
        var currentPage = 1;
        var currentFilter = '*';
        var filterAttribute = 'data-filter';
        var filterValue = "";
        var pageAttribute = 'data-page';
        var pagerClass = 'isotope-pager';

setPagination();
goToPage(1);
        // update items based on current filters
        function changeFilter(selector) { $grid.isotope({

filter: selector

}); }

        //grab all checked filters and goto page on fresh isotope output
        function goToPage(n) {
            currentPage = n;
            var selector = itemSelector;
            var exclusives = [buttonFilter];
                // smash all values back together for 'and' filtering
                filterValue = exclusives.length ? exclusives.join('') : '*';

                // add page number to the string of filters
                var wordPage = currentPage.toString();
                filterValue += ('.'+wordPage);
            changeFilter(filterValue);
        }


        function setPagination() {
            var SettingsPagesOnItems = function(){
                var itemsLength = $grid.children(itemSelector).length;
                var pages = Math.ceil(itemsLength / 10);
                var item = 1;
                var page = 1;
                var selector = itemSelector;
                var exclusives = [buttonFilter];
                filterValue = exclusives.length ? exclusives.join('') : '*';
                    // find each child element with current filter values
                    $grid.children(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);
                  }
                }
                $grid.after($isotopePager);
            }();
        }

И у меня также есть кодовая ручка для обзора.

https://codepen.io/angexlynne/pen/BaNoqam?editors=1010

Я думаю, мне просто нужно обновить эту функцию

// use value of search field to filter
  var $quicksearch = $('#quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
/*TODO: UPDATE THIS SCRIPT TO ACCOMODATE FOR PAGINATION
setPagination();
goToPage(1);*/
  })
  );