I need help, Quicksand multiple filter - Help me please.

I need help, Quicksand multiple filter - Help me please.

Hello i need add one filter in this example...

For download  here

a js quicksan ok download here

Im add a filter "delta" but, not work.. :(
  2. <script type="text/javascript">
  3. // DOMContentLoaded
  4. $(function() {
  5. // bind dropdowns in the form
  6. var $filterAlpha = $('#filter select[name="alpha"]');
  7. var $filterBeta = $('#filter select[name="beta"]');
  8. var $filterGamma = $('#filter select[name="gamma"]');
  9. var $filterDelta = $('#filter select[name="delta"]');

  11. // get the first collection
  12. var $applications = $('#applications');

  14. // clone applications to get a second collection
  15. var $data = $applications.clone();

  17. // attempt to call Quicksand on every form change
  18. $('select').change(
  19. function() {
  20. $(this).addClass('animate');
  21. if ($($filterAlpha).val() == '0'){
  22. if ($($filterBeta).val() == '0'){
  23. if ($($filterGamma).val() == '0'){
  24. if ($($filterDelta).val() == '0'){
  27. //0-0-0
  28. var $filteredData = $data.find('div');
  29. } else {
  30. //0-0-1
  31. var $filteredData = $data.find('div[data-gamma=' + $($filterGamma).val() + ']' );
  32. }
  33. } else {
  34. if ($($filterGamma).val() == '0'){
  35. //0-1-0
  36. var $filteredData = $data.find('div[data-beta=' + $($filterBeta).val() + ']' );
  37. } else {
  38. //0-1-1
  39. var $filteredData = $data.find('div[data-beta=' + $($filterBeta).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']');
  40. }
  41. }
  42. } else {
  43. if ($($filterBeta).val() == '0'){
  44. if ($($filterGamma).val() == '0'){
  45. //1-0-0
  46. var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' );
  47. } else {
  48. //1-0-1
  49. var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']');
  50. }
  51. } else {
  52. if ($($filterGamma).val() == '0'){
  53. //1-1-0
  54. var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-beta=' + $($filterBeta).val() + ']');
  55. } else {
  56. //1-1-1
  57. var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-beta=' + $($filterBeta).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']');
  58. }
  62. }
  63. }
  68. } else {
  69. if ($($filterAlpha).val() == '0'){
  70. if ($($filterBeta).val() == '0'){
  71. if ($($filterGamma).val() == '0'){
  72. //1-0-0-0
  73. var $filteredData = $data.find('div[data-delta=' + $($filterdelta).val() + ']' );
  74. } else {
  75. //1-0-1
  76. //1-0-0-1
  77. var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-delta=' + $($filterdelta).val() + ']');
  78. }
  79. } else {
  80. if ($($filterGamma).val() == '0'){
  81. //1-1-0
  82. //1-0-1-0
  83. var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']');
  85. } else {
  86. //1-1-1
  87. //1-0-1-1
  88. var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-gamma=' + $($filtergamma).val() + ']' + 'div[data-delta=' + $($filterdelta).val() + ']');
  89. }
  90. }
  92. } else {
  94. //1-0-1-1
  95. //1-1-1-0
  96. var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-beta=' + $($filterbeta).val() + ']' + 'div[data-gamma=' + $($filtergamma).val() + ']');
  98. }
  99. }
  100.   
  102. } else {
  104. //1-1-1-0
  105. //1-1-1-1
  106. var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-beta=' + $($filterbeta).val() + ']' + 'div[data-gamma=' + $($filtergamma).val() + ']'+ 'div[data-delta=' + $($filterdelta).val() + ']');
  108. }
  110.   }
  112. // finally, call quicksand
  113. $applications.quicksand($filteredData, {
  114.    duration: 1000,
  115.    easing: 'easeInOutQuad',
  116. adjustHeight:   'auto'
  117. });
  119. });
  121. </script>
    
    1. orm id="filter">
               <select name="alpha">
                  <option value="0">All items</option>
                  <option value="1">Pepper</option>
                  <option value="2">Apple</option>
               </select>
               <select name="beta">
                  <option value="0">All colours</option>
                  <option value="1">Red</option>
                  <option value="2">Green</option>
               </select>
               <select name="gamma">
                  <option value="0">All places</option>
                  <option value="1">Couche</option>
                  <option value="2">Table</option>
               </select>














    2.           <select name="delta">
                  <option value="0">All places</option>
                  <option value="1">Black</option>
                  <option value="2">White</option>
               </select>



    3.  </form>
Is posible add a one filter???..

and pagination?

Please Help!

Thanks!!