Question

请在下方找到我的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元素。

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

Answer 1

仅在初始化或更新tablesorter时调用textExtraction函数。因此，如果您有一个包含数据的单元格，您希望根据某些指标进行不同的排序，则您需要使用textExtraction和textSorter函数的组合。您可以在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);
            }
        }
    });

});

JQuery Tablesorter文本提取不按预期工作

1 个答案: