checkbox cannot retain its state after applying table sorter

Question

I have a checkbox in html table. Using knockoutjs, I am binding my html table to json object. Untill now everything works fine. But when I apply tablesorter, checkbox that is previously checked gets unchecked. It happens after Buildtable() function is called from the code listed below. Browser I am using is IE6. Not sure if its a brower issue. Don't have access to anyother browser currently. Any help would be appreciated.

Thanks

    <div id="unassignedDiv" style="text-align:center;display:none;">
    <table class="tablesorter" id="unassignedTable">
    <thead><tr>
    <th align="center">Date</th>
    <th align="center">Rush?</th>
    </thead></tr>
    <tbody id="resultsbody" data-bind="template: { name: 'resultsTemplate', foreach: Results }"></tbody></table>

    <script id="resultsTemplate" type="text/html">
    <tr><td data-bind="text: dateneeded" align="center"></td>
    <td align="center">
    <input type="checkbox" data-bind="checked:rushindicator" disabled="disabled" />
    </td>
    </tr>
    </script>
    </div>

    //Build JsonObject
    BuildArray = function () {
           var searchjson = {
                "Results": [
                   { "dateneeded": "11/08/12", rushindicator: true },
                   { "dateneeded": "11/10/12", rushindicator: false }]};
    };


    BuildResultsPage = function () {
            $j('#unassignedDiv').show();
            var resultArray = BuildArray();
            exported.viewmodelExpanded = ko.mapping.fromJS(resultArray);
            ko.applyBindings(exported.viewmodelExpanded, $j('#unassignedDiv')[0]);        
            BuildTable(); //If this is commented, html loads checkbox with checked.
        };

    BuildTable = function () {
            $j("#unassignedTable").tablesorter({ widgets: ['zebra'], widgetZebra: { css: ["oddcolor", "evencolor"] },
                sortInitialOrder: 'desc',
                headers:
                {
                  0: { sorter: 'Date' },
                  1: { sorter: false }
                }
            }).tablesorterPager({ container: $j("#pager"), removeRows: true });
    };

score 0 · Answer 1 · edited May 23 '17 at 12:27

If you are using the original tablesorter, try the code from this answer.*

If you are using my fork of tablesorter, use this parser (demo):

$.tablesorter.addParser({
    id: 'checkbox',
    is: function(s) {
        return false;
    },
    format: function(s, table, cell, cellIndex) {
        var $t = $(table), $c = $(cell), c,

        // resort the table after the checkbox status has changed
        resort = false;

        if (!$t.hasClass('hasCheckbox')) {
            $t
            .addClass('hasCheckbox')
            // make checkbox in header set all others
            .find('thead th:eq(' + cellIndex + ') input[type=checkbox]')
            .bind('change', function(){
                c = this.checked;
                $t.find('tbody tr td:nth-child(' + (cellIndex + 1) + ') input').each(function(){
                  this.checked = c;
                  $(this).trigger('change');
                });
            })
            .bind('mouseup', function(){
                return false;
            });
            $t.find('tbody tr').each(function(){
                $(this).find('td:eq(' + cellIndex + ')').find('input[type=checkbox]').bind('change', function(){
                    $t.trigger('updateCell', [$(this).closest('td')[0], resort]);
                });
            });
        }
        // return 1 for true, 2 for false, so true sorts before false
        c = ($c.find('input[type=checkbox]')[0].checked) ? 1 : 2;
        $c.closest('tr')[ c === 1 ? 'addClass' : 'removeClass' ]('checked');
        return c;
    },
    type: 'numeric'
});

$(function() {
    $('table').tablesorter({
        headers: {
            0: { sorter: 'checkbox' }
        }
    });
});

The reason this parser won't work with the original plugin is because of the format function parameters - cellIndex is not available.

Thanks for the reply. I am using original tablesorter and did as what was given in the link. It didn't work. And also I am not sorting my column with checkbox. This is happening only on IE6. I tested the same code on chrome and it worked without any issues. — fcmaine, Nov 12 '12 at 13:45
Ahh ok, I was a bit confused since the pager `removeRows` option is available in my fork, but not part of the original plugin. Could you provide a demo of the code or show a sample of the resulting HTML. It's confusing because the template doesn't have a closing `` nor a closing ``. — Mottie, Nov 12 '12 at 23:41
@Mottie...I've updated the html and knockoutjs script in the question adding closing tags for tr and script. I couldn't add any image of my html result. — fcmaine, Nov 13 '12 at 02:56
I was interested in what the resulting table HTML looked like. Do all of the inputs stay disabled? Also how is the BuildResultsPage function called, is it wrapped in a document ready function? — Mottie, Nov 15 '12 at 00:19
I don't know how to share my html as an image. Sorry about that. The HTML would have checkbox and is correctly checked according to the value it is bound to. But after a call to BuildTable(), the resulting HTML table will have all checkbox unchecked in that column irrespective of the value it is bound to. And yes, BuildResultsPage() is called from document ready function. — fcmaine, Nov 19 '12 at 20:01

checkbox cannot retain its state after applying table sorter

1 Answers1