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?

Antisyphilitic

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.

Selfpossession

I've tried this and it doesn't work for me. Other columns sort but the checkbox column doesn't. Each time the checkbox is checked/unchecked it updates the hidden span value 1/0. I can see this happening in Firebug. – Haag

Ahh ... the problem is that TableSorter caches the formatted data to make sorting quick. Whenever you change an input you need to call an update function like so: $(this).parents("table").trigger("update"); – Haag

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

}); 

Stylistic

Tested this with tablesorter 2.0.5 and firefox 38. The parser work fine, but when you add the last sorter.bind() call firefox either hangs or gives a stack overflow/ too much recursion message. As a result the table sorting is only valid for the initial check box values. – Machine

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

Hadwin

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

Lepore

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

Postmistress

This only works for dynamic tables if you change the format function call to function(s, table, node) and use the node as a jQuery object. See: ghidinelli.com/2008/03/25/… – Berneta

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

Stylish

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

Machine

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

Unreflective