Question

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

考虑进行分页的项目数也包括我要排除的组行。
此外，当我点击下一个按钮时，会显示上一页显示的记录。
我有一个全选复选框，当我选中全部选中复选框时，第二页上的分组将丢失。

你能帮我吗

<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中，可以观察到以下内容：

只能看到设定的行数，除了设置行外还包括分组标题行。
分组窗口小部件仅适用于当前可见的行。如果某一行显示在其他页面上，则该行不会包含在另一页的组中。
为了在操作某些内容后更新（应用）分组窗口小部件，例如复选框，只需触发applyWidgets method。
```
$('table').trigger('applyWidgets');
```

我希望能涵盖您所关注的问题。

TableSorter分组和分页小部件

1 个答案: