Geek Answers Handbook

How can I add tables to my filter so that I can select several checkboxes, as well as filtering from the drop-down list?

I have a table that can be filtered by several checkboxes, as well as a select drop-down list. Essentially, what I want to do is click on a few checkboxes to find each line containing this class, so class 1 and 3 or an example, and then filter it by location.

At the moment, I’ve come very close, where I can choose both a location (this is also a class, two letters for abbreviations), and one class of flags, but I want people to be able to compare several classes from the flags.

The problem is what I understand, but I can’t figure out how to fix it. The code adds each class to the end of "tr". This means that if you apply 2 filters from the checkboxes, it will not find anything, instead of finding all of each filter. Although this behavior is perfectly functional for 1 checkbox and Dropdown, which means that it will only give me Filter 1 values ​​from Tennessee, I want it to be able to give me Filter 2, Filter 3 and Filter 4 at the same time if I therefore select.

Any ideas on how to change this to make it possible to select multiple checkboxes?

By the way, I am very limited in which JavaScript / jQuery plugins I can use, so I struggle so much to use tableSorter with this solution.

My HTML:

 <form name="FilterForm" id="FilterForm" action="" method="">
    <input type="checkbox" name="filterStatus" value="1" /><label for="filter_1">Filter 1</label>
    <input type="checkbox" name="filterStatus" value="2" /><label for="filter_2">Filter 2</label>
    <input type="checkbox" name="filterStatus" value="3" /><label for="filter_3">Filter 3</label>
    <input type="checkbox" name="filterStatus" value="4" /><label for="filter_4">Filter 4</label>
    <select type="dropdown" name="filterStatus" id="chooseState" class="filter">
      <option value="ZZ">--Choose State--</option>
      <option value="TN">Tennessee</option>
      <option value="MO">Missouri</option>
      <option value="NV">Nevada</option>
      <option value="IA">Iowa</option>
    </select><label>State</label>
       </form>

<table id="StatusTable">
     <tbody>                        
       <tr class="1 TN">
       <td class="Name"></td>
       <td class="ID"></td>
       <td class="Type"></td>
       <td class="Location">City, Tennessee</td>
       <td class="Class"></td>
       <td class="Received"></td>
       <td class="Action"></td>
       <td class="Status">Active</td>
     </tr>
</tbody>
</table>

JavaScript:

    $("input[name='filterStatus'], select.filter").change(function () {
var classes = "";
var stateClass = ""

    $("input[name='filterStatus']").each(function() {
    if ($(this).is(":checked")) {
    classes += "." + $(this).val();
    }
});

$("select.filter").each(function() {
if ($(this).val() != 'ZZ') {
stateClass += "." + $(this).val();
}
});

if (classes == "" && stateClass == "") {
// if no filters selected, show all items
$("#StatusTable tbody tr").show();
} else {
// otherwise, hide everything...
$("#StatusTable tbody tr").hide();

    // then show only the matching items
rows = $("#StatusTable tr" + classes + stateClass);
if (rows.size() > 0) {
rows.show();
}
}

});
0
1

, .

.filter(), .

, , :

var classes = [];

$("input[name='filterStatus']").each(function() {
    if ($(this).is(":checked")) {
        classes.push('.'+$(this).val());
    }
});

, , .filter() :

rows = $("#StatusTable tr" + stateClass).filter(classes.length ? classes.join(',') : '*')

!

Fiddle

+1

More articles:


All Articles