javascript - Combines table filters in jquery -
i have table different places, , implemented simple buttons allow filter list. first filter location (north, east, central, south, west) based on postcode. filter on "impress". shows places have have 4 or higher value in column. filters work great separately, not together. result after when press "west" shows me places in "west, when click impress, expect see places in west 4 or 5 score impress.
$('.table td.postcode').each(function() { var celltext = $(this).html(); var locationstring = celltext.substring(0,2); if (locationstring.indexof('w') > -1){ $(this).parent().addclass('west'); } if (locationstring.indexof('c') > -1){ $(this).parent().addclass('central'); } if (locationstring.indexof('e') > -1){ $(this).parent().addclass('east'); } if (locationstring.indexof('s') > -1){ $(this).parent().addclass('south'); } if (locationstring.indexof('n') > -1){ $(this).parent().addclass('north'); } }); $("input[name='filterstatus'], select.filter").change(function () { var classes = []; $("input[name='filterstatus']").each(function() { if ($(this).is(":checked")) { classes.push('.'+$(this).val()); } }); if (classes == "") { // if no filters selected, show items $("#statustable tbody tr").show(); } else { // otherwise, hide everything... $("#statustable tbody tr").hide(); // show matching items rows = $("#statustable tr").filter(classes.length ? classes.join(',') : '*'); if (rows.size() > 0) { rows.show(); } } }); $("input[name='impressstatus']").change(function(){ var classes = []; $("input[name='impressstatus']").each(function() { if ($(this).is(":checked")) { classes.push('.'+$(this).val()); } }); if(classes == ""){ $("#statustable tbody tr").show(); } else{ $(".table td.impress").each(function(){ if($(this).data("impress") >= 4){ $(this).parent().show(); } else{ $(this).parent().hide(); } }); } });<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!--button filters --> <div class="btn-toolbar" role="toolbar" aria-label="..."> <div class="btn-group" style="" data-toggle="buttons"> <label class="btn btn-primary outline"> <input type="checkbox" name="filterstatus" value="north" autocomplete="off">north </label> <label class="btn btn-primary outline"> <input type="checkbox" name="filterstatus" value="east" autocomplete="off" class="radio">east </label> <label class="btn btn-primary outline"> <input type="checkbox" name="filterstatus" value="central" autocomplete="off" class="radio">central </label> <label class="btn btn-primary outline"> <input type="checkbox" name="filterstatus" value="south"autocomplete="off" class="radio">south </label> <label class="btn btn-primary outline"> <input type="checkbox" name="filterstatus" value="west" autocomplete="off" class="radio">west </label> </div><!-- button group --> <label class="btn btn-primary outline"> <input type="checkbox" name="impressstatus" class="radio" aria-pressed="true" autocomplete="off">impress </label> </div><!-- btn toolbar--> <!--table --> <table class="table" id="statustable"> <thead> <tr> <th data-sort="string" style="cursor:pointer">name</th> <!-- <th>description</th> --> <th data-sort="string" style="cursor:pointer;">postcode</th> <th data-sort="int" style="cursor:pointer;">price</th> <th data-sort="int" style="cursor:pointer;">total</th> <th data-sort="int" style="cursor:pointer;">impress</th> <th colspan="4"></th> </tr> </thead> <tbody> <tr data-link="/places/1"> <td>name of place 1</td> <td class="postcode">nw1</td> <td class="price" data-price='3'>3</td> <td class="rating" data-rating='69'>69</td> <td class="impress" data-impress='4'>4</td> </tr> <tr data-link="/places/2"> <td>name of place 2</td> <td class="postcode">e3</td> <td class="price" data-price='4'>4</span></td> <td class="rating" data-rating='89'>89</td> <td class="impress" data-impress='5'>5</td> </tr> <tr data-link="/places/3"> <td>name of place 3</td> <td class="postcode">sw3</td> <td class="price" data-price='2'>2</td> <td class="rating" data-rating='51'>51</td> <td class="impress" data-impress='3'>3</td> </tr> </tbody> </table>code not efficient, works :). once got working, want add more filters.
(sorry bad english)
if these filters need, can use 2 different type of filter:
- hide via javascript
- hide via css
if use 2 types of filters filters can work correctly without use complex javascript code manage big number of different cases , combination:
i add initial (on document load) control check if tr has value impress cell >4, if has add new class: is_impress else add other: no_impress.
$('.table td.impress').each(function(){ var _class = ($(this).data("impress") >= 4) ? "is_impress" : "no_impress"; $(this).parent().addclass(_class); }); the code of filter position same... but... edit filter impress add class table () when active , take off when isn't:
$("input[name='impressstatus']").change(function(){ (!$(this).is(":checked")) ? $("#statustable").removeclass("active_impress") : $("#statustable").addclass("active_impress"); }); if table has class active_impress css rules override inline code of dispaly hide row haven't impress >4:
#statustable.active_impress tr.no_impress{ display:none !important; } this type of filter override other display modification until checkbox stay checked.
i edit fiddle: https://jsfiddle.net/frogmouth/gkba343l/1/
use css more filter
first change on load check, add price:
$('.table tbody tr').each(function(){ var _class = ""; _class += ($(this).find(".price").data("price") >= 2) ? "is_price " : "no_price "; _class += ($(this).find(".impress").data("impress") >= 4) ? "is_impress " : "no_impress "; console.log(_class); $(this).addclass(_class); }); add other handler new filter:
$("input[name='pricestatus']").change(function(){ (!$(this).is(":checked")) ? $("#statustable").removeclass("active_price") : $("#statustable").addclass("active_price"); }); add new selector css rule:
#statustable.active_impress tr.no_impress, #statustable.active_price tr.no_price{ display:none !important; } this result: https://jsfiddle.net/frogmouth/gkba343l/3/
optimize code add more filter:
html filter button:
<label class="btn btn-primary outline"> <input type="checkbox" name="impress" class="cssfilter radio" aria-pressed="true" autocomplete="off">impress </label> use cssfilter indicate css filter button , use name attribute define name of filter, use namespace css class:
.active_{name} .no_{name} .is_{name}
and use generic handler:
$("input.cssfilter").change(function(){ var _name = $(this).attr("name"); console.log(_name); (!$(this).is(":checked")) ? $("#statustable").removeclass("active_"+_name) : $("#statustable").addclass("active_"+_name); }); with can manage filter unique handler, remember add filter onload check , new selector each new filter.
Comments
Post a Comment