How can I sort columns having input elements?

Question

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?

Answer 1

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.

Answer 2

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

}); 

Answer 3

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").

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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