tablesorter自定义显示组头

时间:2013-10-18 09:40:36

标签: jquery grouping tablesorter

首先,我使用TableSorter 2.11.1和jquery 1.9.1。

我使用此演示对行进行分组(http://mottie.github.io/tablesorter/docs/example-widget-grouping.html) 我按照日期对表格进行排序,然后按周将其分组,如此图像

enter image description here

我想要的是在分组栏中添加一周的总价。比如本周的行数。

我在widget-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的专家,所以我找不到价格并将其添加到组头的方法。

1 个答案:

答案 0 :(得分:3)

实际上你的问题让我意识到分组小部件缺少这个功能。所以,我在版本2.12.0中添加了两个新选项(new 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