TableSorter 分组和分页小部件

Question

我正在使用 Tablesorter 以及 Grouping 小部件以及启用的 Pager 小部件。我面临一些问题：

1. 考虑分页的项目数还包括我要排除的组行。

2. 此外，当我单击下一个按钮时，会显示上一页的记录。

3. 我有一个全选复选框，在第二页上，当我选中全选复选框时，分组丢失了。

你能帮帮我吗

<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>

Answer 1

您分享的演示似乎使用的是来自 tablesorter.com 的原始寻呼机，因此不能很好地与分组小部件一起使用。

在这个updated demo中，可以观察到以下内容：

1. 只看到设置的行数，除了设置的行之外，还包括分组标题行。
2. 分组小部件仅适用于当前可见的行。如果一行出现在不同的页面上，它不会被包含在另一个页面上的组中。

3. 为了在操作某些内容（例如复选框）后将分组小部件更新（应用）到表中，只需触发 applyWidgets method。

   $('table').trigger('applyWidgets');
   

我希望能涵盖您的顾虑。