Tablesorter 2.0.3 - Sorting af column of checkboxes (resorting)

[hammerskov]

I have been using this excellent plugin for a few days, but now I have hit a problem which I can't seem to solve.

I have a table where a couple of columns are checkboxes. The initial sorting on the columns works correct, but when I un-check some of them and try to sort again i looks like it is still sorting the columns as if nothing has changed.

I have tried using

$("#myTable").trigger("update");

but it doesn't seem to help in this case. Am I missing some configuration, or is this working as designed?

[MorningZ]

Can you post a sample of the table HTML?

(using lodgeit if necessary)  http://paste.pocoo.org/

[hammerskov]

<table id="myTable">
<thead>
        <tr> <th>Text</th> <th>Checkboxes</th> </tr>
</thead>
<tbody>
        <tr> <td>A</td> <td><input type="checkbox"></td> </tr>
        <tr> <td>B</td> <td><input type="checkbox" checked="checked"></td> </tr>
        <tr> <td>C</td> <td><input type="checkbox"></td> </tr>
        <tr> <td>D</td> <td><input type="checkbox" checked="checked"></td> </tr>
</tbody>
</table>


So when you hit sort on the checkbox column the first time, row B and D goes to the top. Now try to remove the check from row D and instead check row C. When you try to sort the column again row C and D should stay together at the top or bottom, but they don't.

MorningZ wrote:

Can you post a sample of the table HTML?

(using lodgeit if necessary)  http://paste.pocoo.org/

[MorningZ]

"When you try to sort the column again row C and D should stay
together at
the top or bottom, but they don't"

No, no they shouldn't

look into the code of the tablesorter.js code, it's storing the values/
text of the <td>'s value right there in the client on the wiring up of
the plugin, and it doesn't handle changing of the values/text

you'll have to come up with some other solution, or dig real deep into
the code and make changes to fit your need

[hammerskov]

MorningZ wrote:

look into the code of the tablesorter.js code, it's storing the values/
text of the <td>'s value right there in the client on the wiring up of
the plugin, and it doesn't handle changing of the values/text

you'll have to come up with some other solution, or dig real deep into
the code and make changes to fit your need

I was under the impression that calling

$("#myTable")").trigger("update");

would cause the plugin to recreate the cache, and thus detect the changes in the checkbox column.

[MorningZ]

yeah, that method *seems* like it would work

i added in the main js this "alert"

                    // apply easy methods that trigger binded events
                    $this.bind("update", function() {
                        alert("Update Called");
                        // rebuild parsers.
                        this.config.parsers = buildParserCache(this,
$headers);

                        // rebuild the cache map
                        cache = buildCache(this);


and wired checkboxes on a sortable table like so

                $(":checkbox").click(function() {
                    $("#myTable").trigger("update");
                });

and that alert did indeed fire... but no change in cache...

ah well, i tried...  good luck with this....

[hammerskov]

MorningZ wrote:

ah well, i tried...  good luck with this....

Thank you very much for trying. Gues i'll be using a bit more time on this than I first anticipated :-)

[tlphipps]

You'll need to write a custom parser for your data set to accomplish
this.  As MorningZ alluded to earlier, the tablesorter is looking for
"text" by default in between the <td></td> tags.  What it's finding in
your case is simply an <input type="checkbox">.  It doesn't parse that
entity to find the 'selected' attribute for sorting purposes.  So
you'll need to write a custom parser that will present the 'selected'
attribute to the tablesorter for sorting purposes.
See this page in the tablesorter docs for more info:
http://tablesorter.com/docs/example-parsers.html

On Sep 5, 6:43 am, hammerskov <r...@...> wrote:
> MorningZ wrote:
>
> > ah well, i tried...  good luck with this....
>
> Thank you very much for trying. Gues i'll be using a bit more time on this
> than I first anticipated :-)
> --
> View this message in context:http://www.nabble.com/Tablesorter-2.0.3---Sorting-af-column-of-checkb...
> Sent from the jQuery General Discussion mailing list archive at Nabble.com.

[MorningZ]

that doesn't sound right

because anything inside the <td></td> tag would be treated as text
*unless* the built in parsers couldn't figure out what to do with them
(or a custom parser was defined)

so the columns could be like

<td>A</td><td><input type="checkbox" checked="checked" /></td>
<td>B</td><td><input type="checkbox" /></td>
<td>C</td><td><input type="checkbox" /></td>
<td>D</td><td><input type="checkbox" checked="checked" /></td>
<td>E</td><td><input type="checkbox" checked="checked" /></td>

and it would sort

<td>B</td><td><input type="checkbox" /></td>
<td>C</td><td><input type="checkbox" /></td>
<td>A</td><td><input type="checkbox" checked="checked" /></td>
<td>D</td><td><input type="checkbox" checked="checked" /></td>
<td>E</td><td><input type="checkbox" checked="checked" /></td>

because

"<input type="checkbox" />"

comes before

"<input type="checkbox" checked="checked" />"

[tlphipps]

By default the tablesorter code uses some algorithm(s) to try and
'figure out' where the text starts. So it skips HTML entities (maybe
not all, but some).

Take a look at the textExtraction methods that are built into the code
and you'll see what I'm talking about.

On Sep 5, 9:54 am, MorningZ <morni...@...> wrote:

> that doesn't sound right
>
> because anything inside the <td></td> tag would be treated as text
> *unless* the built in parsers couldn't figure out what to do with them
> (or a custom parser was defined)
>
> so the columns could be like
>
> <td>A</td><td><input type="checkbox" checked="checked" /></td>
> <td>B</td><td><input type="checkbox" /></td>
> <td>C</td><td><input type="checkbox" /></td>
> <td>D</td><td><input type="checkbox" checked="checked" /></td>
> <td>E</td><td><input type="checkbox" checked="checked" /></td>
>
> and it would sort
>
> <td>B</td><td><input type="checkbox" /></td>
> <td>C</td><td><input type="checkbox" /></td>
> <td>A</td><td><input type="checkbox" checked="checked" /></td>
> <td>D</td><td><input type="checkbox" checked="checked" /></td>
> <td>E</td><td><input type="checkbox" checked="checked" /></td>
>
> because
>
> "<input type="checkbox" />"
>
> comes before
>
> "<input type="checkbox" checked="checked" />"

[hammerskov]

Thank you both for taking the time to guide me in the right direction. I have solved the problem, and you do need to create a new parser. The reason it seemed to work when the page is loaded is because the textual representation of a checked and un-checked checkbox is different.

However, the parser is not as easy one would imagine. From the example that tlphipps guided me to show how the format function takes one parameter 's' containing the textual representation of a textbox. If you try to wrap this (which I did) you do no get a reference to the actual checkbox and therefore it doesn't work.

If you go through the code and find the parser responsible for ip-addresses you will notice that the format function actualy takes three parameters: s, table, cell. If you wrap the cell and get the checkbox from it's child elements we get the correct result. You still have to call $("#myTable").trigger("update"); before sorting.

 $.tablesorter.addParser({
        // set a unique id
        id: 'checkboxes',
        is: function(s) {
            // return false so this parser is not auto detected
            return false;
        },
        format: function(s,table,cell) {
            // format your data for normalization
                        var checked = $(cell).children(":checkbox").get(0).checked;
            return  checked  ? 1 : 0;
        },
        // set type, either numeric or text
        type: 'numeric'
    });

    $(function() {
        $("#myTable").tablesorter({
                        debug:true,
            headers: {
                1: {
                    sorter:'checkboxes'
                }
            }
        });
});