tablesorter自定義顯示組標題

首先，我使用TableSorter 2.11.1和jquery 1.9.1。tablesorter自定義顯示組標題

我用這個演示，組我行（http://mottie.github.io/tablesorter/docs/example-widget-grouping.html）我的日期我的表進行排序，我是按周這樣的形象

enter image description here

我想要的分組是加總的分組欄中的一週價格。比如一週中的行數。

我在窗口小部件grouping.js搜索和我發現代碼計算行數在本週

$tr = c.$table.find('tr.group-header').bind('selectstart', false); 
     if (wo.group_count) { 
      $tr.each(function(){ 
       $(this).find('.group-count').html(wo.group_count.replace(/\{num\}/g, $(this).nextUntil('tr.group-header').filter(':visible').length)); 
      }); 
     }

我不是在jQuery的一個專家，所以我不能找到一種方法，獲得價格並將其添加到組標題。

來源

2013-10-18 ubertinador

你可以創建jsfiddle –

好吧，我會嘗試。 – ubertinador

http://jsfiddle.net/pZcY7/這裏的jsfiddle，但我複製我的代碼，但我沒有像我的電腦上工作：/ 這是我第一次使用這個工具。 – ubertinador

其實你的問題讓我意識到分組部件缺少這個功能。所以，我添加了兩個新的選項在版本2.12.0（新grouping widget demo）：

group_callback - 功能，它允許你修改組頭文字
group_complete - 事件名稱分組部件後在桌子上觸發已完成。

所以現在你可以做這樣的事情（demo）：

var total = 0, 
    targetColumn = 1, 
    $table = $('table'); 

$table.on('groupingComplete', function(){ 
    // don't include the group header rows 
    $table.find('tbody tr:not(.group-header)').each(function(){ 
     total += parseFloat($(this).find('td').eq(targetColumn).text()); 
    }); 
    $table.find('.group-header .total').html(total); 
}); 

$table.tablesorter({ 
    theme: 'blue', 
    widthFixed: true, 
    widgets: ['group'], 
    widgetOptions: { 
     // text added to the group header - {num} is the number of rows in that group 
     group_count: ' ({num})', 

     // add a group subtotal to the "Numeric" column 
     group_callback: function ($cell, $rows, column, table) { 
      // callback allowing modification of the group header labels 
      // $cell = current table cell (containing group header cells '.group-name' & '.group-count' 
      // $rows = all of the table rows for the current group; table = current table (DOM) 
      // column = current column being sorted/grouped 
      if (column === targetColumn) { 
       var t, subtotal = 0; 
       $rows.each(function() { 
        subtotal += parseInt($(this).find('td').eq(column).text()); 
       }); 
       t = '; <span class="subtotal">' + subtotal + 
        '</span>/<span class="total"></span>'; 
       $cell.find('.group-count').append(t); 
      } 
     } 

    } 
});

如果你需要的目標不止一個列，您可以更改targetColumn到一個數組，然後使用targetColumn.indexOf(column) >= 0代替column === targetColumn。

來源

2013-10-18 19:12:47 Mottie

感謝您使用這項新功能。這正是我想要的。非常好的工作！ – ubertinador

tablesorter自定義顯示組標題

回答

相關問題