TableSorter grouping and Paging widget

I am using Tablesorter along with the Grouping widget as well as the Pager widget enabled. I am facing some issues:

The number of items that are considered for paging also include the group row which I want to exclude.
Also when I click on the next button there are records from the previous page that are being shown.
I have a select all checkbox and on the 2nd page when I check the select all checkbox the grouping is lost.

Can you please help me

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
    // hide bottom pageBlockbuttons
    $(".pbBottomButtons").last().hide();
});



 function toggleBottomPageBlockButtons() {
        setTimeout(function(){
            var availableRows = $('table[id$="casesTable"] tr').not(":hidden").length;            
            if(availableRows > 12) {
                $(".pbBottomButtons").last().show();
            }
            else {
                $(".pbBottomButtons").last().hide();
            }
        },500);
    }
</script>


<script type="text/javascript" charset="utf-8">
                    $('table[id$="casesTable"]').tablesorter({
                        sortList: [ [1, 0] ],
                        sortForce: [ [1, 0] ],
                        widgets: ["filter","group", "columns", "zebra" ],
                        widgetOptions : {

                            // css class applied to the table row containing the filters & the inputs within that row
                            filter_cssFilter : 'tablesorter-filter',

                            // filter widget: If there are child rows in the table (rows with class name from "cssChildRow" option)
                            // and this option is true and a match is found anywhere in the child row, then it will make that row
                            // visible; default is false
                            filter_childRows : false,

                            // Set this option to true to use the filter to find text from the start of the column
                            // 
                            filter_startsWith : false,

                            group_collapsible : true,  

                            group_collapsed   : false, 

                            group_count       : " ({num})", 

                            group_dateString  : function(date) {
                              return date.toLocaleString(); 
                             },
                           group_formatter   : function(txt, col, table, c, wo) {
                                return txt === "" ? "Empty" : txt;
  },
  group_callback    : function($cell, $rows, column, table){
    //  var subtotal = 0;
     // $rows.each(function(){
      //  subtotal += parseInt( $(this).find("td").eq(column).text() );
      //});
      //$cell.find(".group-count").append("; subtotal: " + subtotal );

  },
  group_complete    : "groupingComplete"

                        }
                    }).tablesorterPager({container: $("#pager")});;

                    // check uncheck all functionality
                    $("#checkUncheckAll").click(function() {       
                        $(".selectionCheckbox").not(":hidden").attr('checked', this.checked);
                                          });   

                    // uncheck all checkboxes when user clicks on next/previous page 

                    $("#pager a img:not(.disabled)").click(function(){
                        $("#checkUncheckAll").attr('checked', false);
                 /*    $(".selectionCheckbox").attr('checked', false); */
                    });
                </script>

Solution

The demo you shared appears to be using the original pager from tablesorter.com, and therefore does not work well with the grouping widget.

In this updated demo, the following can be observed:

Only the set number of rows are seen, the grouping header rows are included in addition to the set rows.
The grouping widget only works on the currently visible rows. If a row appears on a different page, it will not be included in the group on another page.
In order to update (apply) the grouping widget to a table after something was manipulated, like the checkboxes, just trigger the applyWidgets method.
```
$('table').trigger('applyWidgets');
```

I hope that covers the concerns you are having.