filter with double parameters - JavaScript Snipplr Social Repository

Revision: 51026

at September 14, 2011 22:00 by pixelatorz

Updated Code

$(document).ready(function() {

	initFilters();
	initPagingWithFilter(".paged", ".short", "ul.paging");
});

/***************************************************************************************/
function initFilters() {
	
  showAllItems();	
  hideEmptyDiv();
  
  window.filters = new Array();
  window.courseFilter = new Array();
  window.ingredientFilter = new Array();
  window.filteredIngredients = new Array();
  window.filteredCourses = new Array();
  window.filteredRecipes = new Array();

  $("#receptenfilter input[type=checkbox]").click(function() {
    updateFilters($(this));
    updateRecipeUI();
  });
}

function updateFilters(clicked) {
	filters = [];
	courseFilter = [];
	ingredientFilter = [];
	
	$("#receptenfilter .gang input[type=checkbox]:checked ").each(function() {
		if($(this).val() != "on")
			courseFilter.push($(this).val());
	});
	
	$("#receptenfilter .bestanddeel input[type=checkbox]:checked").each(function() {
		ingredientFilter.push($(this).val());
	});
  
  	//bij allegangen de andere gangen afchecken
	if($(clicked).attr("id") == "allegangen") {
		 $("#receptenfilter .gang input[type=checkbox]").each(function() {
			if($(this).attr("id") != "allegangen")
				$(this).removeAttr("checked");
		});
	}else{
		var allegang = $("#receptenfilter #allegangen");
		//allegang.checked = false;
		if(courseFilter.length > 0)
			allegang.removeAttr("checked");
	}
  
 	filteredCourses = new Array();
	
	if(courseFilter.length > 0) {
		$("#recipes article").each(function() {
			var recipe = this;
			
			courseFilter.forEach(function(el) {
				if($(recipe).find("a[data-course=" + el + "]").length > 0)
					filteredCourses.push(recipe);
			});
		});
	} else if($("#receptenfilter #allegangen").attr("checked")) {
		$("#recipes article").each(function() {
			filteredCourses.push(this);
		});
	}
  
 	filteredRecipes = new Array();
	
  	if(ingredientFilter.length == 0)
		filteredRecipes = filteredCourses;
	else {
		filteredCourses.forEach(function(recipe) {
			ingredientFilter.forEach(function(ing) {
				if($(recipe).find("a[data-ingredient=" + ing + "]").length > 0)
					filteredRecipes.push(recipe);
			});
		});
	}
	/*
	console.log("courses filter: " + courseFilter.length);
	console.log("ing filter: " + ingredientFilter.length);
	
	console.log("filtered courses: " + filteredCourses.length);
	console.log("recipes: " + filteredRecipes.length);
	*/
}

function updateRecipeUI() {
	$("#recipes article").hide();
	$("#recipes article").removeClass("visible");
	
	hideEmptyDiv();
	
	if(filteredRecipes.length == 0) {
		if( $("#receptenfilter #allegangen").attr("checked"))
			showAllItems();
		else
			showEmptyDiv();
	} else {	  
		filteredRecipes.forEach(function(recipe) {
			showItem(recipe);	
		});
	}
	initPagingWithFilter(".paged", ".short", "ul.paging");
}
  
  

function showEmptyDiv(){
	$("#pagingempty").show();
	$(".paging").hide();
}
  
function hideEmptyDiv(){
	$("#pagingempty").hide();
	$(".paging").show();
} 
 
function showItem(theItem){
	$(theItem).show();
	$(theItem).addClass("visible");
}

function showAllItems(){
	$("#recipes article").show();	
	$("#recipes article").addClass("visible");
}

function initPagingWithFilter(container, item, nav){
	
	var itemsPerPage = 5;
	var currentPage, totalPages;
	
	var container = $(container);
	var nav = $(nav);
	
	var items =  $(container).children(".visible");

	//console.log("items: " + $('.visible').length);
	
	totalPages = Math.ceil( $('.visible').length/itemsPerPage);
	
	nav.empty();
	
	// back button
	var backButton = nav.append('<li><a class="backLink" href="#">&laquo;</a></li>');
	
	for(var i = 0; i < totalPages; i++){
		// populate nav with page links
		var pageItem = nav.append('<li><a class="pageLink" href="#" data-page="' + i + '">' + (i+1).toString() + "</a></li>");
	}
		
	// next button
	var nextButton = nav.append('<li><a class="nextLink" href="#">&raquo;</a></li>');
	
	$('li a', nav).click(function(evt){
		evt.preventDefault();
				
		if($(this).hasClass('pageLink')){		
			pageTo(parseInt($(this).attr('data-page')));
		}else if($(this).hasClass('backLink')){
			pageTo(currentPage - 1);
		}else if($(this).hasClass('nextLink')){
			pageTo(currentPage + 1);
		}
	});
	
	pageTo(0);
	
	function pageTo(newPage){
		currentPage = newPage;
		
		// active page state
		$('li a', nav).removeClass('active');
		$('li a[data-page=' + currentPage + ']').addClass('active');
		
		// manage next & back button visibility
		if(currentPage == totalPages - 1){
			$('li .nextLink', nav).hide();
		}else{
			$('li .nextLink', nav).show();
		}
		
		if(currentPage == 0){
			$('li .backLink', nav).hide();
		}else{
			$('li .backLink', nav).show();
		}
		
		// show hide
		items.each(function(i){
			if(i >= currentPage*itemsPerPage && i < currentPage*itemsPerPage+itemsPerPage){
				$(this).fadeIn("slow");
			}else{
				$(this).hide();
			}
		});
	}
}
}

Revision: 51025

at September 13, 2011 01:04 by pixelatorz

Updated Code

$(document).ready(function() {

	initFilters();
	initPagingWithFilter(".paged", ".short", "ul.paging");
});

/***************************************************************************************/

function initFilters() {
	
  showAllItems();	
	
  window.filters = new Array();
  window.parameter1Filter = new Array();
  window.parameter2Filter = new Array();
  window.parameter1Filtered = new Array();
  window.parameter2Filtered = new Array();

  $("#filter input[type=checkbox]").click(function() {
    updateFilters();
    updateList();
  });
}

/***************************************************************************************/

function updateFilters() {

  filters = [];
  parameter1Filter = [];
  parameter2Filter = [];

  $("#filter .parameter1 input[type=checkbox]:checked ").each(function() {
   
    parameter1Filter.push($(this).val());
  });
  
  $("#filter .parameter2 input[type=checkbox]:checked").each(function() {
	
	parameter2Filter.push($(this).val());
  });

  
  if(parameter1Filtered.length == 0) {
    parameter1Filtered = $("#container article");
  }
  parameter1Filtered = new Array();
  
  if(parameter2Filtered.length == 0) {
    parameter2Filtered = $("#container article");
  }
  parameter2Filtered = new Array();

  $("#container article").each(function() {
    var recipe = this;
		
    parameter2Filter.forEach(function(el) {
     // $(recipe).find("a[data-parameter2=" + el + "]").css('border','3px dotted green');
      if($(recipe).find("a[data-parameter2=" + el + "]").length > 0)
		parameter2Filtered.push(recipe);
    });
    
    parameter1Filter.forEach(function(el) {
	  //alert(el);
     // $(recipe).find("a[data-parameter1=" + el + "]").css('border','3px dotted red');
	  if($(recipe).find("a[data-parameter1=" + el + "]").length > 0)
        parameter1Filtered.push(recipe);
    });
  });
}

/***************************************************************************************/

function updateList() {
	
  $("#container article").hide();
  $("#container article").removeClass("visible");
 
   if(parameter2Filtered.length ==0 && parameter1Filtered.length > 0){
		 //parameter 2 - filtering
		 parameter1Filtered.forEach(function(recipe) {
				showItem(recipe);	
		 });
  
  }else if(parameter2Filtered.length >0 && parameter1Filtered.length == 0){
	  	  //parameter 1 - filtering
	  	  parameter2Filtered.forEach(function(recipe) {
			showItem(recipe);	
		 });
  
  }else if(parameter2Filtered.length ==0 && parameter1Filtered.length == 0){
	   //"no filters - show all"
	 	showAllItems();
  
  }else if(parameter2Filtered.length >0 && parameter1Filtered.length > 0){
	  
	   //alert("parameter 1 a parameter 2-filtering");
	   
	  parameter2Filtered.forEach(function(recipe) {
		
			for( i=0 ; i < parameter1Filtered.length; i++)
			{
				 if(recipe == parameter1Filtered[i])
				 	showItem(recipe);	
			}
				
		 }); 
	
	}
	
	initPagingWithFilter(".paged", ".short", "ul.paging");
}
  
  
function showItem(theItem){
	
	$(theItem).show();
	$(theItem).addClass("visible");
}

function showAllItems(){
	
	$("#container article").show();	
	$("#container article").addClass("visible");
}

/***************************************************************************************/

function initPagingWithFilter(container, item, nav){

	var itemsPerPage = 5;
	var currentPage, totalPages;
	
	var container = $(container);
	var nav = $(nav);
	
	var items =  $(container).children(".visible");

	totalPages = Math.ceil( $('.visible').length/itemsPerPage);
	
	nav.empty();
	
	// back button
	var backButton = nav.append('<li><a class="backLink" href="#">&laquo;</a></li>');
	
	for(var i = 0; i < totalPages; i++){
		// populate nav with page links
		var pageItem = nav.append('<li><a class="pageLink" href="#" data-page="' + i + '">' + (i+1).toString() + "</a></li>");
	}
		
	// next button
	var nextButton = nav.append('<li><a class="nextLink" href="#">&raquo;</a></li>');
	
	$('li a', nav).click(function(evt){
		evt.preventDefault();
				
		if($(this).hasClass('pageLink')){		
			pageTo(parseInt($(this).attr('data-page')));
		}else if($(this).hasClass('backLink')){
			pageTo(currentPage - 1);
		}else if($(this).hasClass('nextLink')){
			pageTo(currentPage + 1);
		}
	});
	
	pageTo(0);
	
	function pageTo(newPage){
		currentPage = newPage;
		
		// active page state
		$('li a', nav).removeClass('active');
		$('li a[data-page=' + currentPage + ']').addClass('active');
		
		// manage next & back button visibility
		if(currentPage == totalPages - 1){
			$('li .nextLink', nav).hide();
		}else{
			$('li .nextLink', nav).show();
		}
		
		if(currentPage == 0){
			$('li .backLink', nav).hide();
		}else{
			$('li .backLink', nav).show();
		}
		
		// show hide
		items.each(function(i){
			if(i >= currentPage*itemsPerPage && i < currentPage*itemsPerPage+itemsPerPage){
				$(this).fadeIn("slow");
			}else{
				$(this).hide();
			}
		});
	}
}

Revision: 51024

at September 13, 2011 01:02 by pixelatorz

Initial Code

$(document).ready(function() {

	initFilters();
	initPagingWithFilter(".paged", ".short", "ul.paging");
});

/******************************************************************************************/

function initFilters() {
	
  showAllItems();	
	
  window.filters = new Array();
  window.parameter1Filter = new Array();
  window.parameter2Filter = new Array();
  window.parameter1Filtered = new Array();
  window.parameter2Filtered = new Array();

  $("#filter input[type=checkbox]").click(function() {
    updateFilters();
    updateRecipeUI();
  });
}

/******************************************************************************************/
function updateFilters() {

  filters = [];
  parameter1Filter = [];
  parameter2Filter = [];

  $("#filter .parameter1 input[type=checkbox]:checked ").each(function() {
   
    parameter1Filter.push($(this).val());
  });
  
  $("#filter .parameter2 input[type=checkbox]:checked").each(function() {
	
	parameter2Filter.push($(this).val());
  });

  
  if(parameter1Filtered.length == 0) {
    parameter1Filtered = $("#container article");
  }
  parameter1Filtered = new Array();
  
  if(parameter2Filtered.length == 0) {
    parameter2Filtered = $("#container article");
  }
  parameter2Filtered = new Array();

  $("#container article").each(function() {
    var recipe = this;
		
    parameter2Filter.forEach(function(el) {
     // $(recipe).find("a[data-parameter2=" + el + "]").css('border','3px dotted green');
      if($(recipe).find("a[data-parameter2=" + el + "]").length > 0)
		parameter2Filtered.push(recipe);
    });
    
    parameter1Filter.forEach(function(el) {
	  //alert(el);
     // $(recipe).find("a[data-parameter1=" + el + "]").css('border','3px dotted red');
	  if($(recipe).find("a[data-parameter1=" + el + "]").length > 0)
        parameter1Filtered.push(recipe);
    });
  });
}

/******************************************************************************************/

function updateRecipeUI() {
	
  $("#container article").hide();
  $("#container article").removeClass("visible");
 
   if(parameter2Filtered.length ==0 && parameter1Filtered.length > 0){
		 //parameter 2 - filtering
		 parameter1Filtered.forEach(function(recipe) {
				showItem(recipe);	
		 });
  
  }else if(parameter2Filtered.length >0 && parameter1Filtered.length == 0){
	  	  //parameter 1 - filtering
	  	  parameter2Filtered.forEach(function(recipe) {
			showItem(recipe);	
		 });
  
  }else if(parameter2Filtered.length ==0 && parameter1Filtered.length == 0){
	   //"no filters - show all"
	 	showAllItems();
  
  }else if(parameter2Filtered.length >0 && parameter1Filtered.length > 0){
	  
	   //alert("parameter 1 a parameter 2-filtering");
	   
	  parameter2Filtered.forEach(function(recipe) {
		
			for( i=0 ; i < parameter1Filtered.length; i++)
			{
				 if(recipe == parameter1Filtered[i])
				 	showItem(recipe);	
			}
				
		 }); 
	
	}
	
	initPagingWithFilter(".paged", ".short", "ul.paging");
}
  
  
function showItem(theItem){
	
	$(theItem).show();
	$(theItem).addClass("visible");
}

function showAllItems(){
	
	$("#container article").show();	
	$("#container article").addClass("visible");
}

/******************************************************************************************/

function initPagingWithFilter(container, item, nav){

	var itemsPerPage = 5;
	var currentPage, totalPages;
	
	var container = $(container);
	var nav = $(nav);
	
	var items =  $(container).children(".visible");

	console.log("items: " + $('.visible').length);
	
	totalPages = Math.ceil( $('.visible').length/itemsPerPage);
	
	nav.empty();
	
	// back button
	var backButton = nav.append('<li><a class="backLink" href="#">&laquo;</a></li>');
	
	for(var i = 0; i < totalPages; i++){
		// populate nav with page links
		var pageItem = nav.append('<li><a class="pageLink" href="#" data-page="' + i + '">' + (i+1).toString() + "</a></li>");
	}
		
	// next button
	var nextButton = nav.append('<li><a class="nextLink" href="#">&raquo;</a></li>');
	
	$('li a', nav).click(function(evt){
		evt.preventDefault();
				
		if($(this).hasClass('pageLink')){		
			pageTo(parseInt($(this).attr('data-page')));
		}else if($(this).hasClass('backLink')){
			pageTo(currentPage - 1);
		}else if($(this).hasClass('nextLink')){
			pageTo(currentPage + 1);
		}
	});
	
	pageTo(0);
	
	function pageTo(newPage){
		currentPage = newPage;
		
		// active page state
		$('li a', nav).removeClass('active');
		$('li a[data-page=' + currentPage + ']').addClass('active');
		
		// manage next & back button visibility
		if(currentPage == totalPages - 1){
			$('li .nextLink', nav).hide();
		}else{
			$('li .nextLink', nav).show();
		}
		
		if(currentPage == 0){
			$('li .backLink', nav).hide();
		}else{
			$('li .backLink', nav).show();
		}
		
		// show hide
		items.each(function(i){
			if(i >= currentPage*itemsPerPage && i < currentPage*itemsPerPage+itemsPerPage){
				$(this).fadeIn("slow");
			}else{
				$(this).hide();
			}
		});
	}
}

Initial URL

Initial Description

Initial Title

filter with double parameters

Initial Tags

javascript, filter

Initial Language

JavaScript

Choose a language for easy browsing: