Achieve dynamic Prev and Next functionality for pagination using Isotope

Question

I'm using jQuery Isotope for my pagination functionality. Does anyone know if this sort of thing is built into jquery-isotope? I read the documentation but couldn't find anything.

I got the pages working with no issues, but currently, the next and prev are not functioning as intended and are showing all 6 divs.

I'm currently trying to make the prev and next buttons work in the sense that they will flow to the appropriate (opposite) page when clicked, and works dynamically. I have attempted to achieve this functionality in jQuery under // attempt at making prev and next buttons work. jQuery is not my most robust language so I'd prefer a pure JS solution if possible, but I am open to anything.

/**
 * selector helper function
 */
const select = (el, all = false) => {
  el = el.trim()
  if (all) {
    return [...document.querySelectorAll(el)]
  } else {
    return document.querySelector(el)
  }
}

/**
 *  onscroll event listener 
 */
const onscroll = (el, listener) => {
  el.addEventListener('scroll', listener)
}

// get to top after new page click

let pageTop = select('.page-top')
if (pageTop) {
  const togglePagetop = () => {
    if (window.scrollY > 100) {
      pageTop.classList.add('active')
    } else {
      pageTop.classList.remove('active')
    }
  }
  window.addEventListener('load', togglePagetop)
  onscroll(document, togglePagetop)
}
/** 
 * Team Isotope and filter
 */

let teamIsotope = document.querySelector('.team-isotope');

if (teamIsotope) {

  let teamFilter = teamIsotope.getAttribute('data-team-filter') ? teamIsotope.getAttribute('data-team-filter') : '*';
  let teamLayout = teamIsotope.getAttribute('data-team-layout') ? teamIsotope.getAttribute('data-team-layout') : 'masonry';
  let teamSort = teamIsotope.getAttribute('data-team-sort') ? teamIsotope.getAttribute('data-team-sort') : 'original-order';

  window.addEventListener('load', () => {
    let teamIsotope = new Isotope(document.querySelector('.team-container'), {
      itemSelector: '.team-member',
      layoutMode: teamLayout,
      filter: teamFilter,
      sortBy: teamSort
    });

    let menuFilters = document.querySelectorAll('.team-isotope .team-filters li');
    menuFilters.forEach(function(el) {
      el.addEventListener('click', function() {
        document.querySelector('.team-isotope .team-filters .filter-active').classList.remove('filter-active');
        this.classList.add('filter-active');
        teamIsotope.arrange({
          filter: this.getAttribute('data-filter')
        });
        if (typeof aos_init === 'function') {
          aos_init();
        }
      }, false);
    });

  });
}


// attempt at making prev and next buttons work

var page = 0;
var $items = $(".team-container > .team-member");
var $grid = $(".team-container");

function filtre() {
  var ell = [];
  for (i = page * 3; i < (page + 1) * 3; i++) {
    ell.push($items[i]);
  }
  $grid.isotope({
    filter: ell
  })
  return ell;
}

$("#next").on("click", function() {
  if (page < 3) {
    page += 1;
    filtre();
  }
})

$("#prev").on("click", function() {
  if (page > 0) {
    page -= 1;
    filtre();
  }
})

.pagination-a .pagination .page-item.filter-active .page-link {
  background-color: #72bf43;
}

.team-isotope {
  display: flex;
  flex-direction: column-reverse;
}







  

    
      
        
          
            
          
        
        
          1
        
        
          2
        
        
          
            
          
        
      

    

    
      
        
          
            
          
          
            
              
                
                  foo fooman
                        
                      
                
              
            
            
              
                This company was founded and constructed by foo fooman.
              
              
                
                  Role:  Principal
                
                
                  Phone:  +54 356 945-2334
                
                
                  Email:  agents@example.com
                
              
            
            
              
                
                  
                    
                      
                    
                  
                  
                    
                      
                    
                  
                  
                    
                      
                    
                  
                  
                    
                      
                    
                  
                  
                    
                      
                    
                  
                
              

            
          
        
      
      
        
          
            
          
          
            
              
                
                  foo fooman
                        
                      
                
              
            
            
              
                foo fooman is a Project Manager
              
              
                
                  Role:  Project Manager
                
                
                  Phone:  +54 356 945-2334
                
                
                  Email:  foo@foofooman.com
                
              
            
            
              
                
                  
                    
                      
                    
                  
                  
                    
                      
                    
                  
                  
                    
                      
                    
                  
                  
                    
                      
                    
                  
                
              
            
          
        
      
      
        
          
            
          
          
            
              
                
                  foo fooman
                        
                      
                
              
            
            
              
                foo is a Project Manager for
              
              
                
                  Role:  Project Manager
                
                
                  Phone:  +54 356 945-2334
                
                
                  Email:  foo@foofooman.com
                
              
            
            
              
                
                  
                    
                      
                    
                  
                  
                    
                      
                    
                  
                  
                    
                      
                    
                  
                  
                    
                      
                    
                  
                
              
            
          
        
      
      
        
          
            
          
          
            
              
                
                  foo fooman
                        
                      
                
              
            
            
              
                This company was founded and constructed by foo fooman.
              
              
                
                  Role:  Principal
                
                
                  Phone:  +54 356 945-2334
                
                
                  Email:  agents@example.com
                
              
            
            
              
                
                  
                    
                      
                    
                  
                  
                    
                      
                    
                  
                  
                    
                      
                    
                  
                  
                    
                      
                    
                  
                  
                    
                      
                    
                  
                
              

            
          
        
      
      
        
          
            
          
          
            
              
                
                  foo fooman
                        
                      
                
              
            
            
              
                foo fooman is a Project Manager
              
              
                
                  Role:  Project Manager
                
                
                  Phone:  +54 356 945-2334
                
                
                  Email:  foo@foofooman.com
                
              
            
            
              
                
                  
                    
                      
                    
                  
                  
                    
                      
                    
                  
                  
                    
                      
                    
                  
                  
                    
                      
                    
                  
                
              
            
          
        
      
      
        
          
            
          
          
            
              
                
                  foo fooman
                        
                      
                
              
            
            
              
                foo is a Project Manager for
              
              
                
                  Role:  Project Manager
                
                
                  Phone:  +54 356 945-2334
                
                
                  Email:  foo@foofooman.com

Note: I'd like to have prev disabled when the page loads, and enabled after next is clicked. & vice versa.

Achieve dynamic Prev and Next functionality for pagination using Isotope

0 Answers