更新表columns列

Question

我向jquery.tablesorter插件添加了一个解析器，它正确运行并返回结果(请参阅下面的代码)，但是表没有使用解析的结果进行更新。我错过了一步吗？当页面第一次加载和在标题上排序时，我尝试使用这个方法：

//这在我的add解析器javascript文件中

$.tablesorter.addParser({
    id: "currencyformat",
    is: function () {
        // does it start with a dollar sign
        return false;
    },
    format: function (s, table, cell) {
                var text = s;
                if (text.charAt(0) === '$') {
                    var currency = text.split("$");
                    var result = currencyFormat(parseFloat(currency[1]));
                    return result;  // result looks like "$42.00" without extra zeros
                } else { 
                    return text;
                }
    },
    //parsed: true, // filter widget flag 
    type: "text"  // also tried text and numeric
});

在我的javascript代码中，设置如下：

$('#testtable').tablesorter({
    headers: {
        3: { sorter: 'currencyformat' }, // column # 4
        4: { sorter: 'currencyformat' }, // column # 5
    },
    sortList: [[4, 1]]
});

我的桌子是这样的：.range id type money1 money1 abc 1字母表$44.0000 $491.87000

 jkl   2  alphabet  $42.0000  $12.00000

 xyz   3  alphabet  $45.5000  $23.39000

Answer 1

Tablesorter有一个内置的货币解析器，所以您需要做的就是初始化插件(演示)：

$(function () {
    $('table').tablesorter({
        theme: 'blue',
        sortList: [[1, 1]]
    });
});

更新:尝试这个"modColumn“小部件(演示)：

它通过移除tbody、修改它的内容然后将它添加回来来优化修改表的内容。希望函数示例足够直截了当，不需要太多解释：

$(function () {
    $('table').tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'modColumn'],
        widgetOptions: {
            modColumn : {
                1 : function( table, $cell, html ){
                    return '$ ' + html + ' USD';
                }
            }
        }
    });
});

var modColumn = function(table, c, wo){
    var k, i, $bk, $tb, $cell, n, totalRows, col,
        b = table.tBodies,
        cols = c.columns,
        modColumn = wo.modColumn;
    // if nothing is set, return quickly
    if ($.isEmptyObject(modColumn)) { return; }
    for (k = 0; k < b.length; k++) {
        $bk = $(b[k]);
        if ($bk.length && !$bk.hasClass(c.cssInfoBlock)) {
            $tb = $.tablesorter.processTbody(table, $bk, true);
            n = c.cache[k].normalized;
            totalRows = n.length;
            for (i = 0; i < totalRows; i++) {
                for (col in modColumn) {
                    if ($.isFunction(modColumn[col])) {
                        n[i][cols].$row.children().eq(col).html(function(i, h){
                            // put original value into data-text attribute for updates
                            var $t = $(this),
                                orig = $t.attr(c.textAttribute) || '';
                            if (orig === '') {
                                $t.attr(c.textAttribute, h);
                                orig = h;
                            }
                            return modColumn[col]( table, $(this), orig );
                        });
                    }
                }
            }
            $.tablesorter.processTbody(table, $tb, false);
        }
    }
};

$.tablesorter.addWidget({
    id: "modColumn",
    options: {
        modColumn : {}
    },
    init: function(table, thisWidget, c, wo) {
        c.$table
            .off('.modColumn')
            .on('update updateRows updateAll addRows '.split(' ').join('.modColumn '), function(){
                modColumn(table, c, wo);
            });
        modColumn(table, c, wo);
    }
});