TableSorter jQuery-如何在过滤后获取值？

debugcn 发表于 Dev

吉沙德

我刚刚安装了jQuery Tablesorter插件并成功集成。但是在我的代码中提出了一个问题，即我的表具有时间值，我想在过滤后收集时间值并计算其总和。

附加屏幕截图..

在此处输入图片说明

我想在表格下方显示总时间，但是如何收集表格值？

我只是尝试下面的代码。

$('select').on('change', function() {
  var colCount = 0;
  $('#mytable tbody tr td:nth-child(4)').each(function () {
    if ($(this).attr('td')) {
      colCount += +1;
    } else {
      colCount++;
    }
  });
  alert(colCount);
});

莫蒂

要使此工作正常进行，您需要此答案中的持续时间解析器的稍作修改的版本。通过将"sorter-times"类名称添加到标头单元格，为该列设置解析器。

然后，您需要包含一个自定义窗口小部件以进行计算（demo）：

$(function () {

    // change maxDigits to 4, if values go > 999
    // or to 5 for values > 9999, etc.
    var maxDigits = 3;

    // https://stackoverflow.com/a/27023733/145346
    $.tablesorter.addParser({
        id: "times",
        is: function (s) {
            return false;
        },
        format: function (s) {
            // prefix contains leading zeros that are tacked
            var prefix = new Array(maxDigits + 1).join('0'),
                // split time into blocks
                blocks = s.split(/\s*:\s*/),
                len = blocks.length,
                result = [];
            // add values in reverse, so if there is only one block
            // (e.g. "10"), then it would be the time in seconds
            while (len) {
                result.push((prefix + (blocks[--len] || 0)).slice(-maxDigits));
            }
            // reverse the results and join them
            return result.length ? result.reverse().join('') : s;
        },
        type: "text",
        parsed: true
    });

    $.tablesorter.addWidget({
        id: 'calcTime',
        options: {
            calcTime_columns: []
        },
        format: function (table, c, wo) {
            var array, column, time, index, start, end, str,
            multiplier = [1, 60, 3600]; // s, m, h
            for (column = 0; column < c.columns; column++) {
                if ($.inArray(column, wo.calcTime_columns) >= 0) {
                    array = $.tablesorter.filter.getOptions(table, column, true);
                    time = 0;
                    $.each(array, function (i, t) {
                        console.log(t);
                        end = t.length;
                        index = 0;
                        start = end - maxDigits;
                        while (start >= 0 && index < maxDigits) {
                            str = t.substring(start, end);
                            time += parseInt(str, 10) * multiplier[index];
                            index++;
                            start -= maxDigits;
                            end -= maxDigits;
                        }
                    });
                }
            }
            // with more than one column, you'll need to target tfoot
            // columns separately
            $('tfoot span').html(time + ' seconds');
        }
    });

    $('table').tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'filter', 'calcTime'],
        widgetOptions: {
            // target column with a zero-based index
            calcTime_columns: [3]
        }
    });
});