请在下面找到我的HTML和javascript。我正在尝试根据选择的单选按钮对表中的列进行排序。
<table id="test">
<thead><tr><th>data</th></tr></thead>
<tbody>
<tr><td><span>1.00 %</span> <span>$5,000</span></td></tr>
<tr><td><span>0.50 %</span> <span>$300.00</span></td></tr>
<tr><td><span>1.40 %</span> <span>$0</span></td></tr>
<tr><td><span>1.20 %</span> <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时调用。因此,如果您有一个单元格,要根据某些指标对数据进行不同的排序,则需要使用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> <span>$5,000</span></td><td>abc</td></tr>
<tr><td><span>0.50 %</span> <span>$300.00</span></td><td>xyz</td></tr>
<tr><td><span>1.40 %</span> <span>$0</span></td><td>def</td></tr>
<tr><td><span>1.20 %</span> <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);
}
}
});
});