How can I sort columns having input elements?

I have a table like this:

|   Update   |   Name  |  Code      | modification date |
|            |   name1 | code1      | 2009-12-09        |
|            |   name2 | otehercode | 2007-09-30        | 

Where the Update column contains checkboxes <input type='checkbox' />.

The checkbox initial state is determined before rendering the table, but after the rows are fetched from database (it's based on set of conditions, on the server-side).

The checkbox can be checked by default, unchecked by default or disabled (disabled='disabled' as input attribute).

I'm using jQuery's Tablesorter to sort my tables. And I'd like to be able to sort by the column containing the checkboxes. How is it possible (开发者_如何学运维I could pass some additional attributes to my input element maybe, if it would help...)?

Should I write my own parser to handle that?

---

Add a hidden span just before the input, and include in it some text (that will be used to sort the column). Something like:

<td>
    <span class="hidden">1</span>
    <input type="checkbox" name="x" value="y">
</td>

If needed, you can attach an event to the checkbox so that it modifies the content of the previous sibling (the span) when checked/unchecked:

$(document).ready(function() {

    $('#tableid input').click(function() {
         var order = this.checked ? '1' : '0';
         $(this).prev().html(order);
    })

})

Note: I haven't checked the code, so it might have errors.

---

This is the more complete/correct version of Haart's answer.

$(document).ready(function() {
    $.tablesorter.addParser({ 
        id: "input", 
        is: function(s) { 
            return false; 
        }, 
        format: function(s, t, node) {
            return $(node).children("input[type=checkbox]").is(':checked') ? 1 : 0;
        }, 
        type: "numeric" 
    });

    sorter = $("#table").tablesorter({"headers":{"0":{"sorter":"input"}}});
// The next makes it respond to changes in checkbox values 
    sorter.bind("sortStart", function(sorter){$("#table").trigger("update");});

}); 

---

I'm adding this response because I'm using a supported/forked jQuery TableSorter library with new features. An optional parser library for input/select fields is included.

http://mottie.github.io/tablesorter/docs/

Here's an example: http://mottie.github.io/tablesorter/docs/example-widget-grouping.html and it's done by including the input/select parser library "parser-input-select.js", adding a headers object and declaring the columns and parsing type.

headers: {
  0: { sorter: 'checkbox' },
  3: { sorter: 'select' },
  6: { sorter: 'inputs' }
}

Additional parsers included are: date parsing (w/Sugar & DateJS), ISO8601 dates, months, 2 digit years, weekdays, distance (feet/inches & metric) and title format (removes "A" & "The").

---

You can use the tablesorter jQuery plugin and add a custom parser that is able to sort all checkbox columns:

$.tablesorter.addParser({
        id: 'checkbox',
        is: function (s, table, cell) {
            return $(cell).find('input[type=checkbox]').length > 0;
        },
        format: function (s, table, cell) {
            return $(cell).find('input:checked').length > 0 ? 0 : 1;
        },
        type: "numeric"
    });

---

I tried multiple of the approaches in the other answers, but ended up using the accepted answer from salgiza, with the comment from martin about updating the table model. However, when I first implemented it, I set the update line inside the checkbox onchange trigger, like the wording suggested. This rearranged my rows on checking/unchecking checkbox, which I found very confusing. The lines just hopped away on click. So instead I bound the update functionality to the actual checkbox column header, so that the lines would only be rearranged when clicking to update the sorting. It works just as I want it to:

// checkbox-sorter is the assigned id of the th element of the checbox column
$("#checkbox-sorter").click(function(){ 
    $(this).parents("table").trigger("update");
});

---

You can add a custom parser to TableSorter, something like this:

 $.tablesorter.addParser({ 
    // set a unique id 
    id: 'input', 
    is: function(s) { 
        // return false so this parser is not auto detected 
        return false; 
    }, 
    format: function(s) { 
        // Here we write custom function for processing our custum column type 
        return $("input",$(s)).val() ? 1 : 0; 
    }, 
    // set type, either numeric or text 
    type: 'numeric' 
}); 

And then use it in your table

$("table").tablesorter(headers:{0:{sorter:input}});

---

    <td align="center">
    <p class="checkBoxSorting">YOUR DATA BASE VALUE</p>
    <input type="checkbox" value="YOUR DATA BASE VALUE"/>
    </td>

//javascript
$(document).ready(function() {
$(".checkBoxSorting").hide();
});

---

Just one final touch to make Aaron's answer complete and avoid the stack overflow errors. So, in addition to using the $.tablesorter.parser() functionality as described above, I had to add the following in my page to make it work with updated checkbox values at runtime.

    var checkboxChanged = false;

    $('input[type="checkbox"]').change(function(){
        checkboxChanged = true;
    });

    // sorterOptions is a variables that uses the parser and disables
    // sorting when needed
    $('#myTable').tablesorter(sorterOptions);
    // assign the sortStart event
    $('#myTable')..bind("sortStart",function() {
        if (checkboxChanged) {
            checkboxChanged = false;
            // force an update event for the table
            // so the sorter works with the updated check box values
            $('#myTable')..trigger('update');
        }
    });