How to uncheck all the checkbox in tablesorter with pagination functionality

Question

I have been tortured by this for quite a while.

Because of table sorter pagination will completely remove the invisible rows from the table for faster sorting. I could not get the checkbox in each row to work as my desired.

Here is my jsfiddle -> http://jsfiddle.net/NcqfY/3/

click the variable trigger to bring up the table

Basically what I want to do is get the id for all selected rows and pushed them into an array selectedID . Empty selectedID array when the report is created (or the "create report" button is clicked). So after I clicked the button, I hope that all the checkboxes in the table should get unchecked. I am using the following code:

$('table.tablesorter tbody tr').find('input[type=checkbox]').prop('checked', false); // I can only uncheck the boxes in current page

However I can only uncheck the boxes in current page, not include the pages that are invisible. This really gives me hard time to get the correct ID for selected rows.

Anyone could help me out would be greatly appreciated!

Answer 1

You had some errors in part of your javascript:

$('table.tablesorter tbody').on("click", "tr", function(event) {
    if (event.target.type != 'checkbox') {
        $(':checkbox', this).trigger('click');
        var id = $(this).attr('id');
        if (selectedID.indexOf(id) == -1) {
            selectedID.push(id);
        } else {
            var index = selectedID.indexOf(id);
            selectedID.splice(index, 1);
        }
    }
});

I corrected them for you and it seems to work fine:
!== --> !=
=== --> ==
var id = $(this).attr('id') --> var id = $(this).attr('id');

edit: the above was not working for me so I assumed that was the issue, but to answer your question:

$($(".tablesorter")[0].config.rowsCopy).each(function() {
    $(this).find('input[type=checkbox]').prop('checked', false);
});

this will un-check all of the checkboxes in the table, even the hidden ones

Answer 2

According to the documentation of tablesort's pager , you can do this:

var t = $('table')

// disabling the pager will restore all table rows 
t.trigger('disable.pager'); 

// ---do your thing---

// restore pager 
t.trigger('enable.pager');

This seems to work, granted that you don't omit the pager's size selector (if you do, it throws errors).

I've updated your JSFiddle: jsfiddle.net/NcqfY/6/