我需要使用原始的tablesorter对表中的数字进行排序。
我的问题是:
在我的表中,我有一个TD我想解决,但在这个TD,我有一些DIV喜欢在这个jsfiddle:
http://jsfiddle.net/2mzj57jt/1/
$(function() {
$.tablesorter.addParser({
id: 'colpap',
is: function(s) {
return false;
},
format: function(s) {
var number = parseFloat(s.replace(/\s+/g, ''));
return isNaN(number) ? s : number;
},
type: 'numeric'
});
$('table').tablesorter({
theme: 'blue',
headers: {
0: {
sorter: 'colpap'
}
}
});
});
<table class="tablesorter">
<thead>
<tr>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>256 236
<div class="info" style="background-color: rgb(166, 194, 255);">6 236</div>
<div class="info" style="background-color: rgb(166, 194, 255);">5 000</div>
<div class="info" style="background-color: rgb(166, 194, 255);">11 253</div>
<div class="info" style="background-color: rgb(166, 194, 255);">233 747</div>
</td>
</tr>
<tr>
<td>11 256 232
<div class="info" style="background-color: rgb(166, 194, 255);">4 253 620</div>
<div class="info" style="background-color: rgb(166, 194, 255);">3 501 306</div>
<div class="info" style="background-color: rgb(166, 194, 255);">3 501 306</div>
</td>
</tr>
<tr>
<td>23 056
<div class="info" style="background-color: rgb(166, 194, 255);">20 000</div>
<div class="info" style="background-color: rgb(166, 194, 255);">3 056</div>
</td>
</tr>
<tr>
<td>11 536
<div class="info" style="background-color: rgb(166, 194, 255);">1 536</div>
<div class="info" style="background-color: rgb(166, 194, 255);">2 500</div>
<div class="info" style="background-color: rgb(166, 194, 255);">7 500</div>
</td>
</tr>
<tr>
<td>1 023 585
<div class="info" style="background-color: rgb(166, 194, 255);">1 023 585</div>
</td>
</tr>
</tbody>
</table>
我们看到性别不起作用,因为DIV寄生虫排序! 我认为这只会忽略DIV工作排序
答案 0 :(得分:2)
要忽略其他数据,您只需要在格式化程序中占第一行:
var number = parseFloat(s.split('\n')[0].replace(/\s+/g, ''));
Updated Fiddle 的完整代码。
详细说明如下:
$(function() {
$.tablesorter.addParser({
id: 'colpap',
is: function(s) {
return false;
},
format: function(s) {
var number = parseFloat(s.split('\n')[0].replace(/\s+/g, ''));
return isNaN(number) ? s : number;
},
type: 'numeric'
});
$('table').tablesorter({
theme: 'blue',
headers: {
0: {
sorter: 'colpap'
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>
<link href="http://tablesorter.com/themes/blue/style.css" rel="stylesheet"/>
<table class="tablesorter">
<thead>
<tr>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>256 236
<div class="info" style="background-color: rgb(166, 194, 255);">6 236</div>
<div class="info" style="background-color: rgb(166, 194, 255);">5 000</div>
<div class="info" style="background-color: rgb(166, 194, 255);">11 253</div>
<div class="info" style="background-color: rgb(166, 194, 255);">233 747</div>
</td>
</tr>
<tr>
<td>11 256 232
<div class="info" style="background-color: rgb(166, 194, 255);">4 253 620</div>
<div class="info" style="background-color: rgb(166, 194, 255);">3 501 306</div>
<div class="info" style="background-color: rgb(166, 194, 255);">3 501 306</div>
</td>
</tr>
<tr>
<td>23 056
<div class="info" style="background-color: rgb(166, 194, 255);">20 000</div>
<div class="info" style="background-color: rgb(166, 194, 255);">3 056</div>
</td>
</tr>
<tr>
<td>11 536
<div class="info" style="background-color: rgb(166, 194, 255);">1 536</div>
<div class="info" style="background-color: rgb(166, 194, 255);">2 500</div>
<div class="info" style="background-color: rgb(166, 194, 255);">7 500</div>
</td>
</tr>
<tr>
<td>1 023 585
<div class="info" style="background-color: rgb(166, 194, 255);">1 023 585</div>
</td>
</tr>
</tbody>
</table>