Problem Pagination

[rlsgIBF]

****** CODE 1

// external js: isotope.pkgd.js

var buttonFilters = {};
var buttonFilter;
// quick search regex
var qsRegex;

// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.demanda-item',
filter: function() {
var $this = $(this);
var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
return searchResult && buttonResult;
},
});

// store filter for each group
$('.filters').on( 'change', function( event ) {
var $select = $( event.target );
// get group key
var filterGroup = $select.attr('value-group');
// set filter for group
buttonFilters[ filterGroup ] = event.target.value;
// combine filters
buttonFilter = concatValues( buttonFilters );
console.log(buttonFilter);
// set filter for Isotope
$grid.isotope();
});

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

var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
console.log(qsRegex);
$grid.isotope();
}) );

// flatten object by concatting values
function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
console.log(value);
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 );
};
}

****** END CODE 1

The code above works

Search field
More filter buttons

However, when I try to add a search, it doesn't work

****** CODE 2

jQuery(document).ready( function($) {

var buttonFilters = {};
var buttonFilter;
var qsRegex;

var $grid = $('.grid').isotope({
itemSelector: '.demanda-item',
filter: function() {
var $this = $(this);
var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
return searchResult && buttonResult;
},
});

var currentPage = 1;
var itemsPerPageDefault = 3;
var itemSelector = '.demanda-item';
var currentFilter = '*';
var filterAtribute = 'data-filter';
var pageAtribute = 'data-page';
var pagerClass = 'grid';
var responsiveIsotope = [
[480, 3],
[720, 3]
];

function changeFilter(selector) {
$grid.isotope({
filter: selector
});
}

function goToPage(n) {
currentPage = n;

  var selector = itemSelector;
      selector += ( currentFilter != '*' ) ? '['+filterAtribute+'="'+currentFilter+'"]' : '';
      selector += '['+pageAtribute+'="'+currentPage+'"]';

  changeFilter(selector);

}

function defineItemsPerPage() {
var pages = itemsPerPageDefault;

  for( var i = 0; i < responsiveIsotope.length; i++ ) {
      if( $(window).width() <= responsiveIsotope[i][0] ) {
          pages = responsiveIsotope[i][1];
          break;
      }
  }
  return pages;

}

var itemsPerPage = defineItemsPerPage();

function setPagination() {
var SettingsPagesOnItems = function(){
var itemsLength = $grid.children(itemSelector).length;
var pages = Math.ceil(itemsLength / itemsPerPage);
var item = 1;
var page = 1;
var selector = itemSelector;
selector += ( currentFilter != '*' ) ? '['+filterAtribute+'="'+currentFilter+'"]' : '';

      $grid.children(selector).each(function(){
          if( item > itemsPerPage ) {
              page++;
              item = 1;
          }
          $(this).attr(pageAtribute, page);
          item++;
      });
      currentNumberPages = page;
  }();

  var CreatePagers = function() {
      var $isotopePager = ( $('.'+pagerClass).length == 0 ) ? $('<div class="'+pagerClass+'"></div>') : $('.'+pagerClass);
      $isotopePager.html('');
      for( var i = 0; i < currentNumberPages; i++ ) {
          var $pager = $('<a href="javascript:void(0);" class="pager" '+pageAtribute+'="'+(i+1)+'"></a>');
              $pager.html(i+1);   
              $pager.click(function(){
                  var page = $(this).eq(0).attr(pageAtribute);
                  goToPage(page);
              });
          $pager.appendTo($isotopePager);
      }
      $grid.after($isotopePager);
  }();

}

setPagination();
goToPage(1);

// store filter for each group
$('.filters').on( 'change', function( event ) {
var $select = $( event.target );
// get group key
var filterGroup = $select.attr('value-group');
// set filter for group
buttonFilters[ filterGroup ] = event.target.value;
// combine filters
buttonFilter = concatValues( buttonFilters );
console.log(buttonFilter);
// set filter for Isotope
$grid.isotope();
});

var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
setPagination();
goToPage(1);
}));

$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
setPagination();
goToPage(1);
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});

$(window).resize(function(){
itemsPerPage = defineItemsPerPage();
setPagination();
goToPage(1);
});

function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
}

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

});

****** END CODE 2

This is the code that is causing the problem

Search field
More filter buttons

• pagination

the pagination just doesn't appear