adding multiple filters using jquery

Question

I got a table working in html with filters but I still have problem:

I'm trying to have multiple filters working at once, i trying to have it shows the quest type aswell as if has or has not been completed
I am unable to get the completed quest filter to work I have added a checkbox filter to add a class to the row based on wether the box has been ticked or not it adds class: completed when checked and class: notCompleted when unchecked but now it wont filter them

my fiddle if you need it here

here's my code for jquery:

    // Filter Row Script Type of Quest
// ........................................
$('.filterMenu a').on('click', function (e) {
    e.preventDefault();
    var c = $(this).data('qtype');

    //get all trs from tbody
    var trs = $("#questTable").find("tbody tr");
    trs.hide();

    //Filter all trs from tbody
    trs.filter(function (i, v) {
        if ($(this).data("qtype") == c) {
            return true;
        }
        if (c == "all") {
            return true;
        }
        return false;
    })
    //just show the row if it fits the criteria
    .show();

});

// Filter Row Script Quest Completed or Not
// ........................................
$('.filterMenuCompleted a').on('click', function (e) {
    e.preventDefault();
    var c = $(this).attr('class');

    //get all trs from tbody
    var trs = $("#questTable").find("tbody tr");
    trs.hide();

    //Filter all trs from tbody
    trs.filter(function (i, v) {
        if ($(this).attr("class") == c) {
            return true;
        }
        if (c == "all") {
            return true;
        }
        return false;
    })
    //just show the row if it fits the criteria
    .show();

});

And here my html:

<body>
    <div id="content">
        <div class="filterMenuCompleted">
                <ul>
                    <li><a href="#" class="all">All</a></li>
                    <li><a href="#" class="completed">Completed</a></li>
                    <li><a href="#" class="notCompleted">Not Completed</a></li>
                </ul>
            </div>
        <div class="filterMenu">
            <ul>
                <li><a href="#" data-qtype="all">All</a></li>
                <li><a href="#" data-qtype="mcq">Main Scenario</a></li>
                <li><a href="#" data-qtype="sq">Side Quest</a></li>
            </ul>
        </div>
        <table id="questTable" style="max-width: 800px;" class="all">
            <thead>
                <tr>
                    <th class="table-header">#</th>
                    <th class="table-header">Type</th>
                    <th class="table-header">Icon</th>
                    <th class="table-header">LvL</th>
                    <th class="table-header">Name</th>
                    <th class="table-header">Issuing NPC</th>
                    <th class="table-header">Location</th>
                    <th class="table-header">Done It?</th>
                </tr>
            </thead>
            <tbody>
                <tr id="line1" class="table-row" data-qtype="mcq">
                    <td class="shortTd">MC-1</td>
                    <td class="shortTd">Main Scenario</td>
                    <td class="shortTd">
                        <img src="./images/Quests/Main_Scenario/mc.png" alt="" />
                    </td>
                    <td class="shortTd">1</td>
                    <td> <a href="#"> mcq 1</a>

                    </td>
                    <td>Name 1</td>
                    <td>Area 1</td>
                    <td class="shortTd">
                        <input class="completion" type="checkbox" id="checkbox1">
                    </td>
                </tr>
                <tr id="line2" class="table-row" data-qtype="mcq">
                    <td class="shortTd">Mc-2</td>
                    <td class="shortTd">Main Scenario</td>
                    <td class="shortTd">
                        <img src="./images/Quests/Main_Scenario/mc.png" alt="" />
                    </td>
                    <td class="shortTd">1</td>
                    <td> <a href="#">mcq 2</a>

                    </td>
                    <td>Name 2</td>
                    <td>Area 2</td>
                    <td class="shortTd">
                        <input class="completion" type="checkbox" id="checkbox2">
                    </td>
                </tr>
                <tr id="line2" class="table-row" data-qtype="sq">
                    <td class="shortTd">Sq-1</td>
                    <td class="shortTd">Side Quest</td>
                    <td class="shortTd">
                        <img src="./images/Quests/Main_Scenario/mc.png" alt="" />
                    </td>
                    <td class="shortTd">1</td>
                    <td> <a href="#">Side quest</a>

                    </td>
                    <td>Name 3</td>
                    <td>Area 3</td>
                    <td class="shortTd">
                        <input class="completion" type="checkbox" id="checkbox2">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="footer">Brought to you by Vesper Tia @ Moogle
        <br/>&copy; 2010 - 2015 SQUARE ENIX CO., LTD. All Rights Reserved.</div>
</body>

And of course my css:

/*Global Resets*/

/*....................................*/
 * {
    margin:0;
    padding:0
}
html {
    font-family:Arial, sans-serif;
    font-size:1em
}
h1, h2, h3 {
    margin:0 auto 1em;
    text-align:center
}
h1 {
    margin-top:1em;
    margin-bottom:0
}
h2 {
    color:#e8d19e
}
h3 {
    color:#5a9dd1
}
h4 {
    margin-bottom:.5em;
    padding-bottom:20px;
    text-align:center
}
a {
    color:#CC9900;
    text-decoration:none;
    font-weight:700
}
p {
    margin-bottom:1em;
    text-align:justify;
    line-height:1.3em
}
img {
    max-width:100%
}
table {
    margin:1em auto 3em;
    border-collapse:collapse
}
table th {
    padding:.5em 1em;
    height:2em;
    font-weight:700;
    color:#9ba3b6;
    text-shadow:0 0 5px #000;
    border-bottom:solid 1px #222;
}
table td {
    padding:.5em 1em;
    height:2em;
    background-color:#282828;
    border-bottom:solid 1px #666;
    line-height:1.4em;
    text-align:left
}
#content {
    padding:1em;
    color:#DDD
}

.filterMenuCompleted ul{height: 20px;float: left; margin-right: 50px;}
.filterMenuCompleted ul li{
    display: block;
    float: left;
    margin-right: 5px;
}

.filterMenu ul{height: 20px;float: left; margin-right: 50px;}
.filterMenu ul li{
    display: block;
    float: left;
    clear: right;
    margin-right: 5px;
}
/*Responsive Settings*/

/*...............................................*/
 @media all and (max-width: 500px) {
    table {
        font-size:.8em
    }
    .npcFullCardName, .npcIcon img {
        display:none
    }
    .cardLocation {
        padding:15px;
        width:300px;
        background-size:300px;
        left:-85px;
        font-size:.8em
    }
}
@media all and (min-width: 501px) {
    .npcFullCardName {
        display:inline;
        color:#9c9;
        cursor:help
    }
}
@media all and (max-width: 1023px) {
    html {
        background:url(../images/background_low.jpg) no-repeat top center fixed #000
    }
    table {
        min-width:100%;
        width:100%
    }
}
@media all and (min-width: 1024px) {
    html {
        background:url(../images/background.jpg) no-repeat center center fixed #000;
        -webkit-background-size:cover;
        -moz-background-size:cover;
        -o-background-size:cover;
        background-size:cover
    }
    #content {
        margin:0 auto;
        max-width:1000px
    }
}
}
/*Row Highlight*/

/*................................................................*/
 .current-row td {
    background-color:#1b1b1b;
    color:#FFF
}
.completed td {
    opacity: 0.3
}

One feature I would kindly suggest... You should change classes to "active" depending on which filter button is clicked - otherwise one would soon be lost on what's he's actually currently seeing in the table. f you think about that - than it makes no sense - let's say: the Active button is COMPLETED > (the not-completetd are not visible currently) - Than the user unchecks i.e. one quest making it NOT-completed. Now take a look at the overall result on screen: the button COMPLETED is clicked but inside the table you have both completed and not completed quests visible.... Got it?... — Roko C. Buljan
– Roko C. Buljan, Commented Aug 13, 2015 at 23:38
With that said - none of the provided answers cover that UI issue, which should imply a different approach in your program design... — Roko C. Buljan
– Roko C. Buljan, Commented Aug 13, 2015 at 23:39

Joy Biswas · Accepted Answer · 2015-08-13 23:00:51Z

Here you had all figured out just I added this one if ($(this).hasClass(c)) instead of if ($(this).attr("class") == c)

Refer snippet

$(function(){// Filter Row Script Type of Quest
// ........................................
$('.filterMenu a').on('click', function (e) {
    e.preventDefault();
    var c = $(this).data('qtype');

    //get all trs from tbody
    var trs = $("#questTable").find("tbody tr");
    trs.hide();

    //Filter all trs from tbody
    trs.filter(function (i, v) {
        if ($(this).data("qtype") == c) {
            return true;
        }
        if (c == "all") {
            return true;
        }
        return false;
    })
    //just show the row if it fits the criteria
    .show();

});

// Filter Row Script Quest Completed or Not
// ........................................
$('.filterMenuCompleted a').on('click', function (e) {
    e.preventDefault();
    var c = $(this).attr('class');

    //get all trs from tbody
    var trs = $("#questTable").find("tbody tr");
    trs.hide();

    //Filter all trs from tbody
    trs.filter(function (i, v) {
        if ($(this).hasClass( c)) {
            return true;
        }
        if (c == "all") {
            return true;
        }
        return false;
    })
    //just show the row if it fits the criteria
    .show();

});

// Row Hover Script
// ........................................
$(document).ready(function () {
    $('.table-row').hover(function () {
        $(this).addClass('current-row');
    }, function () {
        $(this).removeClass('current-row');
    });
});

// Row hide Script
// ........................................
$(document).ready(function () {
    $('tr')
        .filter(':has(:checkbox:checked)')
        .addClass('completed')
        .end()
        .click(function (event) {
        if (event.target.type !== 'checkbox') {
            $(':checkbox', this).trigger('click');
        }

    })
        .find(':checkbox')
        .click(function (event) {
        $(this).parents('tr:first').toggleClass('completed');
    });
});

$(document).ready(function () {
    $('tr')
        .filter(':has(:checkbox:not(:checked))')
        .addClass('notCompleted')
        .end()
        .click(function (event) {
        if (event.target.type !== 'checkbox') {
            $(':checkbox', this).trigger('click');
        }

    })
        .find(':checkbox')
        .click(function (event) {
        $(this).parents('tr:first').toggleClass('notCompleted');
    });
});

});

/*....................................*/
 * {
    margin:0;
    padding:0
}
html {
    font-family:Arial, sans-serif;
    font-size:1em
}
h1, h2, h3 {
    margin:0 auto 1em;
    text-align:center
}
h1 {
    margin-top:1em;
    margin-bottom:0
}
h2 {
    color:#e8d19e
}
h3 {
    color:#5a9dd1
}
h4 {
    margin-bottom:.5em;
    padding-bottom:20px;
    text-align:center
}
a {
    color:#CC9900;
    text-decoration:none;
    font-weight:700
}
p {
    margin-bottom:1em;
    text-align:justify;
    line-height:1.3em
}
img {
    max-width:100%
}
table {
    margin:1em auto 3em;
    border-collapse:collapse
}
table th {
    padding:.5em 1em;
    height:2em;
    font-weight:700;
    color:#9ba3b6;
    text-shadow:0 0 5px #000;
    border-bottom:solid 1px #222;
}
table td {
    padding:.5em 1em;
    height:2em;
    background-color:#282828;
    border-bottom:solid 1px #666;
    line-height:1.4em;
    text-align:left
}
#content {
    padding:1em;
    color:#DDD
}

.filterMenuCompleted ul{height: 20px;float: left; margin-right: 50px;}
.filterMenuCompleted ul li{
	display: block;
	float: left;
	margin-right: 5px;
}

.filterMenu ul{height: 20px;float: left; margin-right: 50px;}
.filterMenu ul li{
	display: block;
	float: left;
	clear: right;
	margin-right: 5px;
}
/*Responsive Settings*/

/*...............................................*/
 @media all and (max-width: 500px) {
    table {
        font-size:.8em
    }
    .npcFullCardName, .npcIcon img {
        display:none
    }
    .cardLocation {
        padding:15px;
        width:300px;
        background-size:300px;
        left:-85px;
        font-size:.8em
    }
}
@media all and (min-width: 501px) {
    .npcFullCardName {
        display:inline;
        color:#9c9;
        cursor:help
    }
}
@media all and (max-width: 1023px) {
    html {
        background:url(../images/background_low.jpg) no-repeat top center fixed #000
    }
    table {
        min-width:100%;
        width:100%
    }
}
@media all and (min-width: 1024px) {
    html {
        background:url(../images/background.jpg) no-repeat center center fixed #000;
        -webkit-background-size:cover;
        -moz-background-size:cover;
        -o-background-size:cover;
        background-size:cover
    }
    #content {
        margin:0 auto;
        max-width:1000px
    }
}
}
/*Row Highlight*/

/*................................................................*/
 .current-row td {
    background-color:#1b1b1b;
    color:#FFF
}
.completed td {
    opacity: 0.3
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
        <div class="filterMenuCompleted">
				<ul>
					<li><a href="#" class="all">All</a></li>
	        		<li><a href="#" class="completed">Completed</a></li>
	        		<li><a href="#" class="notCompleted">Not Completed</a></li>
        		</ul>
			</div>
        <div class="filterMenu">
            <ul>
                <li><a href="#" data-qtype="all">All</a></li>
                <li><a href="#" data-qtype="mcq">Main Scenario</a></li>
                <li><a href="#" data-qtype="sq">Side Quest</a></li>
            </ul>
        </div>
        <table id="questTable" style="max-width: 800px;" class="all">
            <thead>
                <tr>
                    <th class="table-header">#</th>
                    <th class="table-header">Type</th>
                    <th class="table-header">Icon</th>
                    <th class="table-header">LvL</th>
                    <th class="table-header">Name</th>
                    <th class="table-header">Issuing NPC</th>
                    <th class="table-header">Location</th>
                    <th class="table-header">Done It?</th>
                </tr>
            </thead>
            <tbody>
                <tr id="line1" class="table-row" data-qtype="mcq">
                    <td class="shortTd">MC-1</td>
                    <td class="shortTd">Main Scenario</td>
                    <td class="shortTd">
                        <img src="./images/Quests/Main_Scenario/mc.png" alt="" />
                    </td>
                    <td class="shortTd">1</td>
                    <td> <a href="#"> mcq 1</a>

                    </td>
                    <td>Name 1</td>
                    <td>Area 1</td>
                    <td class="shortTd">
                        <input class="completion" type="checkbox" id="checkbox1">
                    </td>
                </tr>
                <tr id="line2" class="table-row" data-qtype="mcq">
                    <td class="shortTd">Mc-2</td>
                    <td class="shortTd">Main Scenario</td>
                    <td class="shortTd">
                        <img src="./images/Quests/Main_Scenario/mc.png" alt="" />
                    </td>
                    <td class="shortTd">1</td>
                    <td> <a href="#">mcq 2</a>

                    </td>
                    <td>Name 2</td>
                    <td>Area 2</td>
                    <td class="shortTd">
                        <input class="completion" type="checkbox" id="checkbox2">
                    </td>
                </tr>
                <tr id="line2" class="table-row" data-qtype="sq">
                    <td class="shortTd">Sq-1</td>
                    <td class="shortTd">Side Quest</td>
                    <td class="shortTd">
                        <img src="./images/Quests/Main_Scenario/mc.png" alt="" />
                    </td>
                    <td class="shortTd">1</td>
                    <td> <a href="#">Side quest</a>

                    </td>
                    <td>Name 3</td>
                    <td>Area 3</td>
                    <td class="shortTd">
                        <input class="completion" type="checkbox" id="checkbox2">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="footer">Brought to you by Vesper Tia @ Moogle
        <br/>&copy; 2010 - 2015 SQUARE ENIX CO., LTD. All Rights Reserved.</div>

thx that helped now all i need to do is figure out how to add multiple filters to it like show completed quest but only main scenario quests. thx
@RokoC.Buljan I am very new to stack overflow I am unaware of the acronyms Though I know OP= Original Post. Sorry I didn't mean to offend anyone. Did I do anything wrong?

user1189882 · Accepted Answer · 2015-08-13 23:20:34Z

1

I know you already accepted, but I modified your code a bit, and came up with a working method of using both filters in combination. Here's the HTML I changed (I really only modified the list anchors in both filters, so they have the attribute of filterVal instead of class):

<div class="filterMenuCompleted">
    <ul>
        <li><a href="#" filterVal="all">All</a></li>
        <li><a href="#" filterVal="completed">Completed</a></li>
        <li><a href="#" filterVal="notCompleted">Not Completed</a></li>
    </ul>
</div>
<div class="filterMenu">
    <ul>
        <li><a href="#" filterVal="all">All</a></li>
        <li><a href="#" filterVal="mcq">Main Scenario</a></li>
        <li><a href="#" filterVal="sq">Side Quest</a></li>
    </ul>
</div>

And the JavaScript (I just wiped out what you had and started fresh, so, sorry about that - but feel free to pick out pieces you want to keep and trash the rest):

var filterMenuCompSel = false;
var filterMenuSel = false;

$('.filterMenu ul li a').on('click', function(){
    $(this).closest('ul').find('li').removeClass('selected');
    $(this).closest('li').addClass('selected');
    filterMenuSel = $(this).attr('filterVal');
    ApplyFilter();
});
$('.filterMenuCompleted ul li a').on('click', function(){
    $(this).closest('ul').find('li').removeClass('selected');
    $(this).closest('li').addClass('selected');
    filterMenuCompSel = $(this).attr('filterVal');
    ApplyFilter();
});

function ApplyFilter(){
    $('#questTable tbody tr').each(function(){
        hide = false;
        switch(filterMenuCompSel){
            case 'completed':
                if(!$(this).find('.completion').is(':checked')){
                    hide = true;   
                }
                break;
            case 'notCompleted':
                if($(this).find('.completion').is(':checked')){
                    hide = true;
                }
                break;
        }
        if(!hide){
            switch(filterMenuSel){
                case 'mcq':
                    if($(this).find('td:nth-child(2)').text() != 'Main Scenario'){
                        hide = true;
                    }
                    break;
                case 'sq':
                    if($(this).find('td:nth-child(2)').text() != 'Side Quest'){
                        hide = true;
                    }
                    break;
            }
        }
        if(!hide){
            $(this).show();
        }
        if(hide){
            $(this).hide();
        }
    });
}

And here's a working fiddle: https://jsfiddle.net/62qL9hed/

answered Aug 13, 2015 at 23:20

user1189882

3 Comments

Roko C. Buljan Over a year ago

.text() != 'Main is a really bad idea. Any change in UI would sacrifice the complete program functionality. Bad programming. Also, if(!hide){$(this).show();}if(hide){$(this).hide(); } can be easily written as simply: $(this).toggle(!hide)

user1189882 Over a year ago

Not bad programming, just a simple assumption that a small table would remain about the same. Also, because it's .text(), he could wrap that 'Main Scenario' in several HTML elements - which could greatly change the UI, adding classes and styles 'n such - and it would still work. So long as 'Main Scenario' remains the only text in that cell, it would work fine. Thanks for your input regarding toggle, to be honest, I usually just try to make things more human-legible than concise when not in a production environment - and especially when learning.

Roko C. Buljan Over a year ago

sorry for the harsh words, Didn't mean to offend :| sorry really. What I mean is that - it's always better to assign class or rather data-* than relaying to .text() to do program-comparison, evaluation. Regarding the "make things easy and legible while learning" I must agree with you, but than an if else would be more appropriate ;) if(hide){ $(this).hide();} else { $(this).show(); } makes more sense than if(!hide)...etc Take care and thumbs up

Collectives™ on Stack Overflow

adding multiple filters using jquery

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related