Is there a way to make this smarter?
Here is the complete code jsbin link
the code needs to filter the table, and show in the parameters list, only the filters that remain in the table, and with the number aside the parameter.
<div class="filterColumn">
<h2>size</h2>
<span class="filter" data-filterby="size" data-count="0" data-val="1">1(1)</span>
<span class="filter" data-filterby="size" data-count="0" data-val="2">2(3)</span>
<span class="filter" data-filterby="size" data-count="0" data-val="3">3(4)</span>
<span class="filter" data-filterby="size" data-count="0" data-val="4">4(2)</span>
</div>
<div class="filterColumn">
<h2>height</h2>
<span class="filter" data-filterby="height" data-count="0" data-val="7">7(3)</span>
<span class="filter" data-filterby="height" data-count="0" data-val="8">8(3)</span>
<span class="filter" data-filterby="height" data-count="0" data-val="11">11(4)</span>
</div>
<div class="filterColumn">
<h2>weight</h2>
<span class="filter" data-filterby="weight" data-count="0" data-val="22">22(2)</span>
<span class="filter" data-filterby="weight" data-count="0" data-val="45">45(5)</span>
<span class="filter" data-filterby="weight" data-count="0" data-val="88">88(1)</span>
<span class="filter" data-filterby="weight" data-count="0" data-val="90">90(1)</span>
<span class="filter" data-filterby="weight" data-count="0" data-val="11">11(1)</span>
</div>
<div class="filterColumn">
<h2>color</h2>
<span class="filter" data-filterby="color" data-count="0" data-val="red">red(2)</span>
<span class="filter" data-filterby="color" data-count="0" data-val="green">green(2)</span>
<span class="filter" data-filterby="color" data-count="0" data-val="blue">blue(2)</span>
<span class="filter" data-filterby="color" data-count="0" data-val="grey">grey(2)</span>
<span class="filter" data-filterby="color" data-count="0" data-val="black">black(1)</span>
<span class="filter" data-filterby="color" data-count="0" data-val="white">white(1)</span>
</div>
<table id="productTable">
<tr>
<th>Model</th>
<th>size</th>
<th>height</th>
<th>weight</th>
<th>color</th>
</tr>
<tr data-size="1" data-height="7" data-weight="22" data-color="red">
<td>111az</td>
<td>1</td>
<td>7</td>
<td>22</td>
<td>red</td>
</tr>
<tr data-size="2" data-height="7" data-weight="45" data-color="red">
<td>111as</td>
<td>2</td>
<td>7</td>
<td>45</td>
<td>red</td>
</tr>
<tr data-size="2" data-height="7" data-weight="45" data-color="green">
<td>111af</td>
<td>2</td>
<td>7</td>
<td>45</td>
<td>green</td>
</tr>
<tr data-size="2" data-height="8" data-weight="45" data-color="green">
<td>111ag</td>
<td>2</td>
<td>8</td>
<td>45</td>
<td>green</td>
</tr>
<tr data-size="3" data-height="8" data-weight="45" data-color="blue">
<td>111ah</td>
<td>3</td>
<td>8</td>
<td>45</td>
<td>blue</td>
</tr>
<tr data-size="3" data-height="8" data-weight="45" data-color="blue">
<td>111aj</td>
<td>3</td>
<td>8</td>
<td>45</td>
<td>blue</td>
</tr>
<tr data-size="3" data-height="11" data-weight="22" data-color="grey">
<td>111az</td>
<td>3</td>
<td>11</td>
<td>22</td>
<td>grey</td>
</tr>
<tr data-size="3" data-height="11" data-weight="88" data-color="grey">
<td>111az</td>
<td>3</td>
<td>11</td>
<td>88</td>
<td>grey</td>
</tr>
<tr data-size="4" data-height="11" data-weight="90" data-color="black">
<td>111ak</td>
<td>4</td>
<td>11</td>
<td>90</td>
<td>black</td>
</tr>
<tr data-size="4" data-height="11" data-weight="11" data-color="white">
<td>111al</td>
<td>4</td>
<td>11</td>
<td>11</td>
<td>white</td>
</tr>
</table>
<div id="reset">reset</div>
the jQuery code
var thisfiltertitle = ["size","height","weight","color"];
$("#reset").click(function() {
$("#productTable tr:hidden").show();
$(".filterColumn").find("span").show();
UpdateData();
});
$(".filter").click(function() {
var filterby = $(this).data("filterby").trim();
var val = $(this).data("val");
var rows = $("#productTable tr:visible:gt(0)");
rows.each(function(index) {
var row = $(this);
if ($(this).data(filterby) == val) {
row.show();
}else{
row.hide();
}
});
UpdateData();
});
function UpdateData() {
$(".filterColumn").find("span").each(function(index) {
$(this).attr("data-count",0);
$(this).html($(this).attr("data-val") + "(0)");
});
for(i=0; i<thisfiltertitle.length; i++) {
$("tr[data-" + thisfiltertitle[i] + "]:visible").each(function(index) {
thisoption = $("span[data-filterby=" + thisfiltertitle[i] + "][data-val='" + $(this).data(thisfiltertitle[i]) + "']");
thisoption.attr("data-count",parseInt(thisoption.attr("data-count"),10)+1);
});
}
$(".filterColumn").find("span[data-count=0]").hide();
$(".filterColumn").find("span").each(function(index) {
$(this).html($(this).attr("data-val") + "(" + $(this).attr("data-count") + ")");
});
}