tablesorter stickyhead widget enabling checkboxes jumps to top of the table

Question

I have got an issue with a tablesorter widget stickyhead http://mottie.github.io/tablesorter/docs/example-widget-sticky-header.html

There is a table with many rows, scrolling down forces the header to stick to the top of a window. So it is always visible.

In the first column of the table I have a checkbox element in each row. Scrolling down the table and clicking any of the lower checkboxes forces a jump to the top of the table. I would like to prevent this.

See my fiddle example in the comments below.

Any suggestions?

Answer 1

I don't know if you've seen this demo from the wiki Home page. It doesn't appear to have the issue you describe - probably because of the return false code in the mouseup function.

CSS

table.tablesorter tbody tr.odd.checked td {
    background: #8080c0;
    color: #fff;
}
table.tablesorter tbody tr.even.checked td {
    background: #a0a0e0;
    color: #fff;
}

Script - set the columnWithCheckboxes and resort variables as desired.

// add parser through the tablesorter addParser method
$.tablesorter.addParser({
    id: 'checkbox',
    is: function (s) {
        return false;
    },
    format: function (s, table, cell, cellIndex) {
        var c, $c = $(cell);
        // 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').toggleClass('checked', c === 1);
        return c;
    },
    type: 'numeric'
});

$(function () {
    $('table').tablesorter({
        theme: 'blackice',
        widgets: ['zebra', 'stickyHeaders'],
        headers: {
            0: {
                sorter: 'checkbox'
            }
        },
        initialized: function (table) {

            // column containing all of the checkboxes (zero-based index)
            var columnWithCheckboxes = 0,
                // resort the table after the checkbox status has changed
                resort = false,

                ck, $hdrCheckbox,
                c = table.config,
                wo = c.widgetOptions,
                $t = $(table);

            $hdrCheckbox = $t
                .add(wo.$sticky)
                // make checkbox in header set all others
                .find('thead th:eq(' + columnWithCheckboxes + ') input[type=checkbox]')
                .bind('change', function () {
                    ck = this.checked;
                    $t
                        .children('tbody')
                        .find('tr td:nth-child(' + (columnWithCheckboxes + 1) + ') input')
                        .each(function () {
                            this.checked = ck;
                            $(this).trigger('change');
                        });
                    // make sure stickyHeader checkbox gets updated
                    $hdrCheckbox.prop('checked', ck);
                })
                .bind('mouseup', function () {
                    return false;
                });

            $t.find('tbody tr').each(function () {
                $(this)
                    .find('td:eq(' + columnWithCheckboxes + ')')
                    .find('input[type=checkbox]')
                    .bind('change', function () {
                        $t.trigger('updateCell', [$(this).closest('td')[0], resort]);
                    });
            });
        }
    });
});