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

Question

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

附上屏幕截图..

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

我刚刚尝试了下面的代码..

$('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);
});

Answer 1

要完成这项工作，您需要对 this answer 中的持续时间解析器进行稍微修改的版本。通过将 "sorter-times" class 名称添加到 header 单元格来设置该列的解析器。

然后您需要包含一个自定义小部件来进行计算 (demo):

$(function () {

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

    // https://whosebug.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]
        }
    });
});

备注

此小部件需要过滤器小部件才能工作。我可以使用更多代码使其独立于过滤器小部件。
小部件设置为处理多列，但由于演示在 tfoot 中只有一个结果元素，我没有包含任何额外的编码。如果你需要，那我可以修改插件。

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

TableSorter jQuery -- How to get values after filtering?

jquery

plugins

laravel-4

tablesorter

备注