Filter content with pagination

Question

I have a checkbox filter which filters columns, also I included a pagination. But the pagination is not working that well. For example I filter 'tag 12', and some columns are left, so the pagination has to adjust to only show the result columns. If there are more results it must split the results over more pages, if unchecked then restore the columns.

The columns must be limited to only show for example 4 columns on a page. When the checkboxes are unchecked still they need to show 4 columns a page.

Can you guys help me complete my pagination?

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

  var $filterChecks = $('.tag-filters :checkbox');

  $filterChecks.change(function() {

    var classSelectors = $filterChecks.filter(':checked').map(function() {
      return '.' + this.value;
    }).get();

    var $cont = $('.col-md-4');

    if (classSelectors.length) {
      $cont.hide().has(classSelectors.join()).show();
    } else {
      $cont.show();
    }
  });
  
  // pagination
		var totalContent = $(".col-md-4").length;
		var onePageContent = 4;

		  $(".items-leading .col-md-4:gt(" + (onePageContent - 1) + ")").hide();
		var totalPage = Math.round(totalContent / onePageContent);

		  for(i= 1; i <= totalPage; i++) {
		    $(".pagination").append("" + i + "");
		  }

		  $(".pagination a:first").addClass("active");

		  $(".pagination a").on("click", function() {
		      var index = $(this).index() + 1;
		      var gt = onePageContent * index;

		      $(".pagination a").removeClass("active");
		      $(this).addClass("active");
		      $(".items-leading .col-md-4").hide();

		      for(i = gt - onePageContent; i < gt; i++) {
		        $(".items-leading .col-md-4:eq(" + i + ")").show();
		      }
		  }); // pagination
});

.pagination li {
  display: inline-block
}

.pagination a {
 padding: 5px;
}



  
    
      Tag 10
      Tag 11
      Tag 12
      Tag 13
    
  


 Pagination:





  
    
      Tag 10
    
  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.


  
    
      Tag 11
    
    
      Tag 13
    
  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.


  
    
      Tag 12
    
  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.


  
    
      Tag 13
    
    
      Tag 10
    
  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.


  
    
      Tag 11
    

  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.


  
    
      Tag 11
    
    
      Tag 12
    
  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.


  
    
      Tag 11
    
    
      Tag 12
    
  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.


  
    
      Tag 12
    
  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.


  
    
      Tag 11
    
  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.


  
    
      Tag 11
    
  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.

hallleron · Accepted Answer

There you go. I created a function called createPagination(data) which accepts a collection of the result elements. This function handles the pagination creation as well as the limitation of 4 results on each page.

This is done by splitting the resulted elements into chunks.

I hope this is what you're looking for. Here is the working fiddle:

var size = 4;
var $cont,chunks;
var html = '';
jQuery(document).ready(function($) {

  $cont = $('.col-md-4');
  var filterChecks = $('.tag-filters :checkbox');
  createPagination($cont);
  filterChecks.change(function() {
    html = '';
    var results = [];
    var classSelectors = filterChecks.filter(':checked').map(function() {
	    return '.' + this.value;
    }).get();
 
    if(classSelectors.length){
      for(var x = 0; x < $cont.has(classSelectors.join()).length; x++){
        results.push($cont.has(classSelectors.join())[x]);
      }
      createPagination(results);
    } else {
      createPagination($cont);
    }
  });

  $('div.pagination').on('click', 'a', function(){
    $cont.hide();
    $(chunks[parseInt($(this).text())-1]).show();
  });

});

function createPagination(data){
  chunks = new Array(Math.ceil(data.length / size)).fill("").map(function() {
    return this.splice(0, size)
  }, data.slice());
  
  $cont.hide();
  
  for(var i = 0; i < chunks.length; i++){
    html += ''+(i+1)+'
';
  }

  $('div.pagination').html(html);
  $(chunks[0]).show();
}

.pagination li {
  display: inline-block
}



	
		
      Tag 10
			Tag 11
			Tag 12
			Tag 13
		
	



Pagination:

  1



		
			
				Tag 10
			
		
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.


		
			
				Tag 11
			
			
				Tag 13
			
		
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.


		
			
				Tag 12
			
		
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.


		
			
				Tag 13
			
			
				Tag 10
			
		
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.

		
			
				Tag 11
			
	
		
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.


		
			
				Tag 11
			
			
				Tag 12
			
		
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.


		
			
				Tag 11
			
			
				Tag 12
			
		
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.


		
			
				Tag 12
			
		
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.


		
			
				Tag 11
			
		
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.


		
			
				Tag 11
			
		
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Filter content with pagination

Answers (1)

Related Questions