请在下面找到我的HTML和javascript。我正在尝试根据选择的单选按钮对表中的列进行排序。

<table id="test">
 <thead><tr><th>data</th></tr></thead>
 <tbody>
  <tr><td><span>1.00 %</span>&nbsp;<span>$5,000</span></td></tr>
  <tr><td><span>0.50 %</span>&nbsp;<span>$300.00</span></td></tr>
  <tr><td><span>1.40 %</span>&nbsp;<span>$0</span></td></tr>
  <tr><td><span>1.20 %</span>&nbsp;<span>$500</span></td></tr>
 </tbody>
</table>


$("#test").tablesorter({
            textExtractionCustom: {
                0: function (node) {
                    if ($('#radio-choice-h-2a').is(':checked')) {
                        return $(node).find("span").first().text().replace('%', '').replace(' ', '');
                    }
                    else if ($('#radio-choice-h-2b').is(':checked')) {
                        return $(node).find("span").last().text().replace('$', '').replace(',', '');
                    }
                    else {
                        return $(node).find("span").first().text().replace('%', '').replace(' ', '');
                    }
                }
            },
            headers: { 0: { sorter: "digit" }
            }
        });


如果选中了单选按钮radio-choice-h-2a,则按每个单元格中第一个跨度中的内容进行排序;如果选择了单选按钮radio-choice-h-2b,则按第二个span元素中的内容进行排序。

这似乎没有按预期工作。任何帮助表示赞赏。谢谢。

最佳答案

textExtraction函数仅在初始化或更新tablesorter时调用。因此,如果您有一个单元格,要根据某些指标对数据进行不同的排序,则需要使用textExtractiontextSorter函数的组合。您可以在this Stackoverflow question的答案中找到两种不同的方法。

Here is a demo如何完成

Sort by: <label>Percent <input name="group" type="radio" checked="checked"/></label>
or
<label>Cost: <input name="group" type="radio"/></label>

<table id="test">
    <thead><tr><th>data</th><th>blah</th></tr></thead>
 <tbody>
     <tr><td><span>1.00 %</span>&nbsp;<span>$5,000</span></td><td>abc</td></tr>
     <tr><td><span>0.50 %</span>&nbsp;<span>$300.00</span></td><td>xyz</td></tr>
     <tr><td><span>1.40 %</span>&nbsp;<span>$0</span></td><td>def</td></tr>
     <tr><td><span>1.20 %</span>&nbsp;<span>$500</span></td><td>mno</td></tr>
 </tbody>
</table>


脚本

$(function () {

    var $sortby = $('input[name="group"]');

    $('#test').tablesorter({
        theme: 'blue',
        textExtraction: {
            0: function (node, table, cellIndex) {
                var $n = $(node).find('span');
                // remove percent, commas and dollor signs
                // add semi-colon between values
                return $.trim( $n.eq(0).text().replace(/%/g,'') ) + ';' +
                    $.trim( $n.eq(1).text().replace(/[$,]/g,'') );
            }
        },
        textSorter: function (a, b) {
            // only use special sort if there is a semi-colon
            if (/;/.test(a)) {
                var x = a.split(';'),
                    y = b.split(';'),
                    i = $sortby.index( $sortby.filter(':checked') );
                return $.tablesorter.sortNatural(x[i], y[i]);
            } else {
                return $.tablesorter.sortNatural(a, b);
            }
        }
    });

});

10-05 20:27
查看更多