"Check all" Checkbox in thead doesn't work with stickyHeaders

[ptepper]

Hi,

When you place a checkbox in a TH with stickyHeaders, and then scroll down the page so that the THEAD starts floating, the 'check all checkboxes' functionality stops working. I noticed this similar issue:

#83

And if you look in the last demo listed you'll see that this issue occurs there as well: http://jsfiddle.net/Mottie/abkNM/16/

I think it's making a copy of the TH when you scroll down and it sticks, so the click event might not be bound to the floating checkbox element in the TH, so I tried fixing it by adding a class to TH checkbox , and then defining the 'check all' click function using jquery ".on" so that it attaches to elements created in the future, like this:

$(document).on("click",".checkAll",function(){  
    if($(this).is(":checked"))
        $(".rowCheckbox").attr("checked","checked");
    else
        $(".rowCheckbox").removeAttr("checked");    
})

But that does not work. Any ideas?

thanks.

[Mottie]

Hi ptepper!

It's been a real headache trying to keep all of my demos working with jQuery 1.2.6+, so I decided to give up on older versions to make it easier to code. This demo only works with jQuery 1.7+ and should work with the sticky header properly.

// checkbox parser
$.tablesorter.addParser({
    id: 'checkbox',
    is: function(s) {
        return false;
    },
    format: function(s, table, cell) {
        var $c = $(cell).find('input');
        return $c.length ? $c.is(':checked') ? 1 : 2 : s;
    },
    type: 'numeric'
});

$(window).load(function(){
    var $table = $('table'),
    $sticky, // = $table[0].config.widgetOptions.$sticky
    doChecky = function(c, col){
        $table.find('tbody tr td:nth-child(' + (parseInt(col,10) + 1) + ') input').each(function(){
            this.checked = c;
            $(this).trigger('change');
        });
    };

    // using .on() which requires jQuery 1.7+
    $table.find('tbody')
        .on('change', 'input', function(){
            var chk = $table[0].config.parsers[$(this).closest('td')[0].cellIndex];
            // if the checkbox isn't being parsed by the checkbox parser, ignore it.
            if (chk && chk.id !== 'checkbox') { return; }
            $(this).closest('tr').toggleClass('checked', this.checked);
            $(this).trigger('updateCell', [ $(this).closest('td'), true ]); // true = resort
            // if a server side database needs to be updated, do it here
        })
        .end().find('thead input')
        // Click on checkbox in table header to toggle all inputs
        .on('change', function(){
            var c = this.checked,
                col = $(this).closest('th').attr('data-column');
            doChecky(c, col);
            // update sticky header
            $table[0].config.widgetOptions.$sticky.find('th:eq(' + col + ') input')[0].checked = c;
        })
        .on('mouseup', function(){
            return false;
        });
    // make sticky header checkbox work
    $table[0].config.widgetOptions.$sticky.find('thead input')
        .on('change', function(){
            var c = this.checked,
                col = $(this).closest('th').attr('data-column');
            doChecky(c, col);
            // update main header
            $table.find('th:eq(' + col + ') input')[0].checked = c;
        })
        .on('mouseup', function(){
            return false;
        });
});

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

[Mottie]

I just updated the demo and the code to ignore checkboxes in other columns. Basically, I added this check:

var chk = $table[0].config.parsers[$(this).closest('td')[0].cellIndex];
// if the checkbox isn't being parsed by the checkbox parser, ignore it.
if (chk && chk.id !== 'checkbox') { return; }

[ptepper]

Hi,

Thanks for getting back to me so fast. It took me a little time before I could get back to this project and try it out. It works, but it's throwing an error in firefox:

$table[0].config is undefined

in this line:

$table[0].config.widgetOptions.$sticky.find('th:eq(' + col + ') input')[0].checked = c;

and

$table[0].config.widgetOptions.$sticky.find('thead input')

I got rid of the error by adding a conditional to check for this before both lines where you use this var:

if($table[0].config !== undefined)

[ajaworska]

I'm having the same issue with stickyHeaders v2.28.4 (jquery v1.11.4, tablesorter v2.28.8).
A click on the checkbox is not recognized.

[Mottie]

Hi @ajaworska!

The above code to handle the checkbox in the thead has been incorporated into the parser-input-select.js file. Please include it, or copy the code from the file - here is a demo.

If you continue to have problems, please modify the demo I just shared and try to replicate the issue.

[ajaworska]

Hi @Mottie,
thanx for the quick answer. I added the parser-input-select.js but it didn't solve the issue.
Then I called the demo and must say, my mentioned problem is there too. If you scroll the table so that the header sticks on the top and the first row is not visible and then click the all-select button, the button is selected but the entries in the table aren't.

[Mottie]

Ahhh you're right! I'll work on this later tonight when I get some time.

[ajaworska]

Hi @Mottie, were you able to fix this issue?
The problem seems that the click event on the checkbox isn't fired at all when the list is scrolled down... Removing it from the thead helps but isn't a nice solution.

[Mottie]

Oh! Sorry, I've had a lot of distractions recently. I'll move this higher on my priority list!

[Mottie]

This should now be all fixed in v2.28.10.