CODEWITHSUNDEEP
jquerytablesorter
pufAmuf
pufAmuf

Reputation: 7805

Can't get Tablesorter Checkbox Filtering to work

I'm trying to get a tablesorter filter plugin to work with checkboxes.

The default they show is a string textbox sort:

  • filterContainer (string) - The DOM id of the input box where the user will type 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 do a checkbox filter, and this is what they say about checkboxes:

  • filterOrMode (boolean) - Filter by OR mode, any word may occur. The default is false (AND mode, all words must occur).

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 it doesn't work, though the vague documentation says it should. Here's how the original works for those interested.

If anyone has any idea why this is happening, please let me know :)!

Thank you! :))

Upvotes: 1

Views: 3619

Answers (2)

Patrick Kershner
Patrick Kershner

Reputation: 83

Tats_innit, I tried to adapt the code above to work with the 4 checkboxes that I have, but when i do that, 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 kind of 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>

Upvotes: 0

Tats_innit
Tats_innit

Reputation: 34117

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

Explanation

So to start with: you have 2 checkboxes with the same id which is not correct :) see the updated HTML below (After JQuery Code).

I am not sure if you can do that with checkbox (I might be wrong) : read the plugin: (Please note some guys have written parser you can check them out) but I like tablesorter, plugin link:[link] should work. https://github.com/jbritten/jquery-tablesorter-filter/blob/master/tablesorter_filter.js ;

& You can also take a look in here good discussion / opinions here: jQuery table filter with text, checkboxes, selects & you can look into 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! cheers

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>[email protected]</td>
      <td>http://www.jsmith.com</td>
    </tr>
    <tr>
      <td>Doe</td>
      <td>Jason</td>
      <td>[email protected]</td>
      <td>http://www.jdoe.com</td>
    </tr>
    <tr>
      <td>Smith</td>
      <td>John</td>
      <td>[email protected]</td>
      <td>http://www.jsmith.com</td>
    </tr>
    <tr>
      <td>Doe</td>
      <td>Jason</td>
      <td>[email protected]</td>
      <td>http://www.jdoe.com</td>
    </tr>
    <tr>
      <td>Smith</td>
      <td>John</td>
      <td>[email protected]</td>
      <td>http://www.jsmith.com</td>
    </tr>
    <tr>
      <td>Doe</td>
      <td>Jason</td>
      <td>[email protected]</td>
      <td>http://www.jdoe.com</td>
    </tr>
    <tr>
      <td>Smith</td>
      <td>John</td>
      <td>[email protected]</td>
      <td>http://www.jsmith.com</td>
    </tr>
    <tr>
      <td>Doe</td>
      <td>Jason</td>
      <td>[email protected]</td>
      <td>http://www.jdoe.com</td>
    </tr>
    <tr>
      <td>Smith</td>
      <td>John</td>
      <td>[email protected]</td>
      <td>http://www.jsmith.com</td>
    </tr>
    <tr>
      <td>Doe</td>
      <td>Jason</td>
      <td>[email protected]</td>
      <td>http://www.jdoe.com</td>
    </tr>
  </tbody>
</table>​

Upvotes: 3

Related Questions