Posted By

pixelatorz on 09/13/11


Tagged

javascript filter


Versions (?)

filter with double parameters


 / Published in: JavaScript
 

  1. $(document).ready(function() {
  2.  
  3. initFilters();
  4. initPagingWithFilter(".paged", ".short", "ul.paging");
  5. });
  6.  
  7. /***************************************************************************************/
  8. function initFilters() {
  9.  
  10. showAllItems();
  11. hideEmptyDiv();
  12.  
  13. window.filters = new Array();
  14. window.courseFilter = new Array();
  15. window.ingredientFilter = new Array();
  16. window.filteredIngredients = new Array();
  17. window.filteredCourses = new Array();
  18. window.filteredRecipes = new Array();
  19.  
  20. $("#receptenfilter input[type=checkbox]").click(function() {
  21. updateFilters($(this));
  22. updateRecipeUI();
  23. });
  24. }
  25.  
  26. function updateFilters(clicked) {
  27. filters = [];
  28. courseFilter = [];
  29. ingredientFilter = [];
  30.  
  31. $("#receptenfilter .gang input[type=checkbox]:checked ").each(function() {
  32. if($(this).val() != "on")
  33. courseFilter.push($(this).val());
  34. });
  35.  
  36. $("#receptenfilter .bestanddeel input[type=checkbox]:checked").each(function() {
  37. ingredientFilter.push($(this).val());
  38. });
  39.  
  40. //bij allegangen de andere gangen afchecken
  41. if($(clicked).attr("id") == "allegangen") {
  42. $("#receptenfilter .gang input[type=checkbox]").each(function() {
  43. if($(this).attr("id") != "allegangen")
  44. $(this).removeAttr("checked");
  45. });
  46. }else{
  47. var allegang = $("#receptenfilter #allegangen");
  48. //allegang.checked = false;
  49. if(courseFilter.length > 0)
  50. allegang.removeAttr("checked");
  51. }
  52.  
  53. filteredCourses = new Array();
  54.  
  55. if(courseFilter.length > 0) {
  56. $("#recipes article").each(function() {
  57. var recipe = this;
  58.  
  59. courseFilter.forEach(function(el) {
  60. if($(recipe).find("a[data-course=" + el + "]").length > 0)
  61. filteredCourses.push(recipe);
  62. });
  63. });
  64. } else if($("#receptenfilter #allegangen").attr("checked")) {
  65. $("#recipes article").each(function() {
  66. filteredCourses.push(this);
  67. });
  68. }
  69.  
  70. filteredRecipes = new Array();
  71.  
  72. if(ingredientFilter.length == 0)
  73. filteredRecipes = filteredCourses;
  74. else {
  75. filteredCourses.forEach(function(recipe) {
  76. ingredientFilter.forEach(function(ing) {
  77. if($(recipe).find("a[data-ingredient=" + ing + "]").length > 0)
  78. filteredRecipes.push(recipe);
  79. });
  80. });
  81. }
  82. /*
  83. console.log("courses filter: " + courseFilter.length);
  84. console.log("ing filter: " + ingredientFilter.length);
  85.  
  86. console.log("filtered courses: " + filteredCourses.length);
  87. console.log("recipes: " + filteredRecipes.length);
  88. */
  89. }
  90.  
  91. function updateRecipeUI() {
  92. $("#recipes article").hide();
  93. $("#recipes article").removeClass("visible");
  94.  
  95. hideEmptyDiv();
  96.  
  97. if(filteredRecipes.length == 0) {
  98. if( $("#receptenfilter #allegangen").attr("checked"))
  99. showAllItems();
  100. else
  101. showEmptyDiv();
  102. } else {
  103. filteredRecipes.forEach(function(recipe) {
  104. showItem(recipe);
  105. });
  106. }
  107. initPagingWithFilter(".paged", ".short", "ul.paging");
  108. }
  109.  
  110.  
  111.  
  112. function showEmptyDiv(){
  113. $("#pagingempty").show();
  114. $(".paging").hide();
  115. }
  116.  
  117. function hideEmptyDiv(){
  118. $("#pagingempty").hide();
  119. $(".paging").show();
  120. }
  121.  
  122. function showItem(theItem){
  123. $(theItem).show();
  124. $(theItem).addClass("visible");
  125. }
  126.  
  127. function showAllItems(){
  128. $("#recipes article").show();
  129. $("#recipes article").addClass("visible");
  130. }
  131.  
  132. function initPagingWithFilter(container, item, nav){
  133.  
  134. var itemsPerPage = 5;
  135. var currentPage, totalPages;
  136.  
  137. var container = $(container);
  138. var nav = $(nav);
  139.  
  140. var items = $(container).children(".visible");
  141.  
  142. //console.log("items: " + $('.visible').length);
  143.  
  144. totalPages = Math.ceil( $('.visible').length/itemsPerPage);
  145.  
  146. nav.empty();
  147.  
  148. // back button
  149. var backButton = nav.append('<li><a class="backLink" href="#">&laquo;</a></li>');
  150.  
  151. for(var i = 0; i < totalPages; i++){
  152. // populate nav with page links
  153. var pageItem = nav.append('<li><a class="pageLink" href="#" data-page="' + i + '">' + (i+1).toString() + "</a></li>");
  154. }
  155.  
  156. // next button
  157. var nextButton = nav.append('<li><a class="nextLink" href="#">&raquo;</a></li>');
  158.  
  159. $('li a', nav).click(function(evt){
  160. evt.preventDefault();
  161.  
  162. if($(this).hasClass('pageLink')){
  163. pageTo(parseInt($(this).attr('data-page')));
  164. }else if($(this).hasClass('backLink')){
  165. pageTo(currentPage - 1);
  166. }else if($(this).hasClass('nextLink')){
  167. pageTo(currentPage + 1);
  168. }
  169. });
  170.  
  171. pageTo(0);
  172.  
  173. function pageTo(newPage){
  174. currentPage = newPage;
  175.  
  176. // active page state
  177. $('li a', nav).removeClass('active');
  178. $('li a[data-page=' + currentPage + ']').addClass('active');
  179.  
  180. // manage next & back button visibility
  181. if(currentPage == totalPages - 1){
  182. $('li .nextLink', nav).hide();
  183. }else{
  184. $('li .nextLink', nav).show();
  185. }
  186.  
  187. if(currentPage == 0){
  188. $('li .backLink', nav).hide();
  189. }else{
  190. $('li .backLink', nav).show();
  191. }
  192.  
  193. // show hide
  194. items.each(function(i){
  195. if(i >= currentPage*itemsPerPage && i < currentPage*itemsPerPage+itemsPerPage){
  196. $(this).fadeIn("slow");
  197. }else{
  198. $(this).hide();
  199. }
  200. });
  201. }
  202. }
  203. }

Report this snippet  

You need to login to post a comment.