的tablesorter分組和分頁控件

Question

我使用的tablesorter與分組窗口小部件，以及啓用尋呼機小部件一起。我正面臨一些問題：

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'); 
   

我希望覆蓋您有顧慮。