Checkbox to filter table

Question

patk570 42 Newbie Poster

10 Years Ago

Hello everyone,
I am looking for a jquery code that will filter my table based on 4 different critera that I have set from the database.

The 4 critera is:

Complete
Pending
Waiting for customer response
Waiting for parts

The table is sortable using tablesorter jquery already but I want to add 5 checkboxes above that says:

Filter<form><input type="checkbox" name="All">Show All<input type="checkbox" name="Complete" />Complete<input type="checkbox" name="Pending" />Pending<input type="checkbox" name="Waiting for customer response" />Complete<input type="checkbox" name="Waiting for parts" />Waiting for parts</form>
<table cellpadding="1" cellspacing="1">
        <thead>
            <tr>
                <th>&nbsp;</th>
                <th>Ticket #</th>
                <th>Customer</th>
                <th>Status</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <tr bgcolor="#7BCC70"                    >
                <td><b>1</b></td>
                  <td align="center" height='35px'><a title="View details of ticket 248341" href="ticketdetails.php?ticketid=248341"><b>248341</b></a></td>
                        <td align="center" height='35px'><b>John Smith</b></td>
                        <td align="center"  height='35px'><b>Complete</b></td>
                        <td align="center"  height='35px'><a title="Edit ticket info" href="editticket.php?ticketid=248341"><b>Edit</b></a></td>
                <td align="center" height='35px'><a id="commentDelete" onClick="return delTicket(this.id);" title="Delete ticket" href="?del=248341"><b>Delete</b></a></td></tr>

                            <tr bgcolor="#7BCC70"                    >
                <td><b>2</b></td>
                  <td align="center" height='35px'><a title="View details of ticket 522303" href="ticketdetails.php?ticketid=522303"><b>522303</b></a></td>
                        <td align="center" height='35px'><b>Jane Smith</b></td>
                        <td align="center"  height='35px'><b>Waiting for parts</b></td>
                        <td align="center"  height='35px'><a title="Edit ticket info" href="editticket.php?ticketid=522303"><b>Edit</b></a></td>
                <td align="center" height='35px'><a id="commentDelete" onClick="return delTicket(this.id);" title="Delete ticket" href="?del=522303"><b>Delete</b></a></td></tr>

                            <tr bgcolor="#7BCC70"                    >
                <td><b>3</b></td>
                  <td align="center" height='35px'><a title="View details of ticket 122588" href="ticketdetails.php?ticketid=122588"><b>122588</b></a></td>
                        <td align="center" height='35px'><b>John Q. Test</b></td>
                        <td align="center"  height='35px'><b>Waiting for customer response</b></td>
                        <td align="center"  height='35px'><a title="Edit ticket info" href="editticket.php?ticketid=122588"><b>Edit</b></a></td>
                <td align="center" height='35px'><a id="commentDelete" onClick="return delTicket(this.id);" title="Delete ticket" href="?del=122588"><b>Delete</b></a></td></tr>

                            <tr bgcolor="#7BCC70"                    >
                <td><b>4</b></td>
                  <td align="center" height='35px'><a title="View details of ticket 122589" href="ticketdetails.php?ticketid=122589"><b>122589</b></a></td>
                        <td align="center" height='35px'><b>John Q. Test</b></td>
                        <td align="center"  height='35px'><b>Pending</b></td>
                        <td align="center"  height='35px'><a title="Edit ticket info" href="editticket.php?ticketid=122589"><b>Edit</b></a></td>
                <td align="center" height='35px'><a id="commentDelete" onClick="return delTicket(this.id);" title="Delete ticket" href="?del=122589"><b>Delete</b></a></td></tr>
            </tbody>

</table>

Any ideas?

This is the tablesorter I am using.

javascript

Edited 10 Years Ago by pritaeas because: Moved to Javascript.

1 Contributor
2 Replies
2K Views
1 Hour Discussion Span
Latest Post 10 Years Ago Latest Post by patk570

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

patk570 42 Newbie Poster · Answer 1 · 2013-10-08T03:17:22+00:00

Sorry forgot to select a category...SHould be in Jquery/JSP

patk570 42 Newbie Poster · Answer 2 · 2013-10-08T04:45:08+00:00

So I have been working with these codes:
jquery:

jQuery(document).ready(function () {
    $("#rowspan").tablesorter({
        debug: false,
        widgets: ['zebra'],
        sortList: [
            [0, 0]
        ]
    }).tablesorterFilter({
        filterContainer: $("#filter-box"),
        filterClearContainer: $("#filter-clear-button"),
        filterColumns: [0],
        filterCaseSensitive: false,
        callback: function () {
            var rowCount = $("#rowspan tr:visible").length - 1;
            // alert(rowCount);
        }
    });

    $("#check-box, #check-box2, #check-box3, #check-box4").click(function () {
        // alert($(this).is(":checked"));

        // If both the checkboxes are selected or not selected.  
        if ($("#check-box").is(":checked") && $("#check-box2").is(":checked") && $("#check-box3").is(":checked") && $("#check-box4").is(":checked")) || (!$("#check-box").is(":checked") && !$("#check-box2").is(":checked") && $("#check-box3").is(":checked") && $("#check-box4").is(":checked")) {

            showAllRow();

        } else if ($("#check-box").is(":checked")) {
            filterRow($("#check-box").val());
        } else if ($("#check-box2").is(":checked")) {
            filterRow($("#check-box2").val());
        } else if ($("#check-box3").is(":checked")) {
            filterRow($("#check-box3").val());
        } else if ($("#check-box4").is(":checked")) {
            filterRow($("#check-box4").val());
        }


    });



});

function showAllRow() {

    $("#rowspan").find("tr").each(function () {
        $(this).show();
    });

}


function filterRow(chckBoxValue) {

    $("#rowspan").find("tr").each(function () {

        var bool = 0; // Identifies if the rows td has that filter or not.

        $(this).find("td").each(function () {
            if ($(this).text() != chckBoxValue) {
                bool = 1;
            } else {
                bool = 0;
                return false;
            }
        });

        if (bool == 1) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });

}

HTML:

<form>
    <input name="filter" id="filter-box" value="" maxlength="30" size="30" type="text">
    <input id="filter-clear-button" type="submit" value="Clear" />
    <br/>
    <input name="filter" id="check-box" type="checkbox" value="Waiting for parts">Waiting for parts
    <input name="filter" id="check-box2" type="checkbox" value="Pending">Pending
    <input name="filter" id="check-box3" type="checkbox" value="Complete">Complete
    <input name="filter" id="check-box4" type="checkbox" value="Waiting for customer response">Waiting for customer response</form>
<table width="100%" id="rowspan" class="tablesorter" cellpadding="0" cellspacing="1">
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th>Ticket #</th>
            <th>Customer</th>
            <th>Status</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody>
        <tr bgcolor="#7BCC70">
            <td><b>1</b>
            </td>
            <td align="center" height='35px'><a title="View details of ticket 248341" href="ticketdetails.php?ticketid=248341"><b>248341</b></a>
            </td>
            <td align="center" height='35px'><b>Brenda Lear</b>
            </td>
            <td align="center" height='35px'><b>Complete</b>
            </td>
            <td align="center" height='35px'><a title="Edit ticket info" href="editticket.php?ticketid=248341"><b>Edit</b></a>
            </td>
            <td align="center" height='35px'><a id="commentDelete" onClick="return delTicket(this.id);" title="Delete ticket" href="?del=248341"><b>Delete</b></a>
            </td>
        </tr>
        <tr bgcolor="#7BCC70">
            <td><b>2</b>
            </td>
            <td align="center" height='35px'><a title="View details of ticket 522303" href="ticketdetails.php?ticketid=522303"><b>522303</b></a>
            </td>
            <td align="center" height='35px'><b>Cheryl Spencer</b>
            </td>
            <td align="center" height='35px'><b>Complete</b>
            </td>
            <td align="center" height='35px'><a title="Edit ticket info" href="editticket.php?ticketid=522303"><b>Edit</b></a>
            </td>
            <td align="center" height='35px'><a id="commentDelete" onClick="return delTicket(this.id);" title="Delete ticket" href="?del=522303"><b>Delete</b></a>
            </td>
        </tr>
        <tr bgcolor="#7BCC70">
            <td><b>3</b>
            </td>
            <td align="center" height='35px'><a title="View details of ticket 122588" href="ticketdetails.php?ticketid=122588"><b>122588</b></a>
            </td>
            <td align="center" height='35px'><b>Roz Taylor</b>
            </td>
            <td align="center" height='35px'><b>Complete</b>
            </td>
            <td align="center" height='35px'><a title="Edit ticket info" href="editticket.php?ticketid=122588"><b>Edit</b></a>
            </td>
            <td align="center" height='35px'><a id="commentDelete" onClick="return delTicket(this.id);" title="Delete ticket" href="?del=122588"><b>Delete</b></a>
            </td>
        </tr>
        <tr bgcolor="#7BCC70">
            <td><b>4</b>
            </td>
            <td align="center" height='35px'><a title="View details of ticket 122589" href="ticketdetails.php?ticketid=122589"><b>122589</b></a>
            </td>
            <td align="center" height='35px'><b>Roz Taylor</b>
            </td>
            <td align="center" height='35px'><b>Complete</b>
            </td>
            <td align="center" height='35px'><a title="Edit ticket info" href="editticket.php?ticketid=122589"><b>Edit</b></a>
            </td>
            <td align="center" height='35px'><a id="commentDelete" onClick="return delTicket(this.id);" title="Delete ticket" href="?del=122589"><b>Delete</b></a>
            </td>
        </tr>
    </tbody>
</table>

But it will not filter.