Unable to configure Tablesorter checkbox filtering

Question

I am trying to create a tablesorter plugin for working with checkboxes.

By default, they show the sorting of the text field:

• filterContainer (string) - DOM identifier of the input field in which the user enters the search string. The default is "# filter-box".

.tablesorterFilter({filterContainer: "#filter-box", filterClearContainer: "#filter-clear-button", filterColumns: [0]}); 

.

 <input name="filter" id="filter-box" value="" maxlength="30" size="30" type="text"> 

And I'm trying to make a checkbox filter, and this is what they say about checkboxes:

• filterOrMode (boolean) - filter by OR mode, any word may occur. The default value is false (AND mode, all words should appear).

So, I did this:

 .tablesorterFilter({filterOrMode: true, filterContainer: '#check-box', filterColumns: [0]}); 

.

 <input name="filter" id="check-box" type="checkbox" value="Doe"> Doe<br> <input name="filter" id="check-box" type="checkbox" value="Smith"> Smith<br> 

And that doesn't work , although in the vague documentation it says. Here's how the original works for those interested.

If anyone knows why this happens, let me know :)!

Thanks!:))

Answer 1

Hiya okeis so working demo here jsfiddle: http://jsfiddle.net/BCreb/87/

Explanation

So, for starters: you have 2 flags with the same identifier, which is wrong :) see the updated HTML below (after the jQuery code).

I'm not sure that you can do this with a checkbox (maybe I'm wrong): read the plugin: (Note that some guys wrote a parser that you can check), but I like tablesorter, plugin link: [link] should Work. https://github.com/jbritten/jquery-tablesorter-filter/blob/master/tablesorter_filter.js ;

& Here you can have a good discussion / opinions here: jQuery filter the table with text, checkboxes, select & , you can study this plugin: http://datatables.net/ ; But the above solution will do the trick for you.

Below code has filterRow() and ShowAll() function which filter your table data accordingly and display the row:

JQuery code

 jQuery(document).ready(function() { $("#myTable").tablesorter({ debug: false, widgets: ['zebra'], sortList: [[0, 0]] }).tablesorterFilter({ filterContainer: $("#filter-box"), filterClearContainer: $("#filter-clear-button"), filterColumns: [0], filterCaseSensitive: false, callback: function() { var rowCount = $("#myTable tr:visible").length - 1; // alert(rowCount); } }); $("#check-box, #check-box2").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-box").is(":checked") && !$("#check-box2").is(":checked")) ) { showAllRow(); } else if ($("#check-box").is(":checked") ) { filterRow($("#check-box").val()); } else if ($("#check-box2").is(":checked") ){ filterRow($("#check-box2").val()); } }); }); function showAllRow() { $("#myTable").find("tr").each(function(){ $(this).show(); }); } function filterRow(chckBoxValue) { $("#myTable").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(); } }); }​ 

This should help! greetings

HTML

 Search: <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="Doe"> Doe<br> <input name="filter" id="check-box2" type="checkbox" value="Smith"> Smith<br> <table id="myTable"> <thead> <tr> <th>Last Name</th> <th>First Name</th> <th>Email</th> <th>Web Site</th> </tr> </thead> <tbody> <tr> <td>Smith</td> <td>John</td> <td> [e-mail] </td> <td>http://www.jsmith.com</td> </tr> <tr> <td>Doe</td> <td>Jason</td> <td> [e-mail] </td> <td>http://www.jdoe.com</td> </tr> <tr> <td>Smith</td> <td>John</td> <td> [e-mail] </td> <td>http://www.jsmith.com</td> </tr> <tr> <td>Doe</td> <td>Jason</td> <td> [e-mail] </td> <td>http://www.jdoe.com</td> </tr> <tr> <td>Smith</td> <td>John</td> <td> [e-mail] </td> <td>http://www.jsmith.com</td> </tr> <tr> <td>Doe</td> <td>Jason</td> <td> [e-mail] </td> <td>http://www.jdoe.com</td> </tr> <tr> <td>Smith</td> <td>John</td> <td> [e-mail] </td> <td>http://www.jsmith.com</td> </tr> <tr> <td>Doe</td> <td>Jason</td> <td> [e-mail] </td> <td>http://www.jdoe.com</td> </tr> <tr> <td>Smith</td> <td>John</td> <td> [e-mail] </td> <td>http://www.jsmith.com</td> </tr> <tr> <td>Doe</td> <td>Jason</td> <td> [e-mail] </td> <td>http://www.jdoe.com</td> </tr> </tbody> </table>​ 

Answer 2

Tats_innit, I tried to adapt the above code to work with 4 checkboxes that I have, but when I do this, it will not recognize the code. Here is what I did:

 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(); } }); } 

Here is my HTML, its look is long though ...

 <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>