DataTables.js对包含带有整数文本的HTML链接的列进行排序 [英] DataTables.js Sort columns containing HTML links with integer text
问题描述
我正在尝试在 DataTables.js ）中对列进行排序包含HTML锚标记。锚标记内的文本是一个整数，如< a href =＃> 123< / a> 。我想对数字列。
I'm trying to sort columns in DataTables.js that contain HTML anchor tags. The text within the anchor tag is an integer, like <a href="#">123</a>. I want to sort the columns numerically.
在文档示例中，有 DataTables HTML排序自动检测示例。我试过这个但它没有解决我的问题 - 它确实正确地解析了HTML中的文本，但是，它处理了生成的文本作为字符串而不是整数。
In the documentation examples, there is DataTables HTML sorting auto-detection example. I tried this but it doesn't solve my issue - it does correctly parse the text out of the HTML, however, it treats the resulting text as a string and not an integer.
示例输出：
0, 0, 1, 14, 67, 67, 7
期望输出：
0, 0, 1, 7, 14, 67, 67
如何在排序之前将< a> 文本解析为整数？
How can I parse the <a> text as an integer prior to sorting?
这是没有以上更新的原始JSFiddle：
http://jsfiddle.net/adamtsiopani/V4Ymr/
This is original JSFiddle without above update(s): http://jsfiddle.net/adamtsiopani/V4Ymr/
$(document).on('ready', function() {
$('.data-table').dataTable({
"bPaginate": true,
"bFilter": true,
"bSort": true,
"bAutoWidth": false,
"iDisplayLength": 100,
"sPaginationType": "full_numbers",
"sDom": '<"tools"T><"top"flip>rt<"bottom"lfip><"clear">',
"oTableTools": {
"aButtons": [
"copy", "csv", "xls", "pdf",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [ "csv", "xls", "pdf" ]
}
]
}
});
$.fn.dataTableExt.aTypes.push(
function ( sData ) {
return 'html';
}
);
});
HTML
HTML
<table class="data-table">
<thead>
<tr>
<th scope="col">Specialty</th>
<th scope="col">Friday<br>21/01/2011</th>
<th scope="col">Saturday<br>22/01/2011</th>
<th scope="col">Sunday<br>23/01/2011</th>
<th scope="col">Monday<br>24/01/2011</th>
<th scope="col">Tuesday<br>25/01/2011</th>
<th scope="col">Wednesday<br>26/01/2011</th>
<th scope="col">Thursday<br>27/01/2011</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">ACCIDENT AND EMERGENCY</a></td>
<td><a href="#">5</a></td>
<td><a href="#">14</a></td>
<td><a href="#">67</a></td>
<td><a href="#">45</a></td>
<td><a href="#">43</a></td>
<td><a href="#">28</a></td>
<td><a href="#">36</a></td>
</tr>
<tr>
<td><a href="#">ANAESTHETICS</a></td>
<td><a href="#">36</a></td>
<td><a href="#">5</a></td>
<td><a href="#">14</a></td>
<td><a href="#">43</a></td>
<td><a href="#">28</a></td>
<td><a href="#">67</a></td>
<td><a href="#">45</a></td>
</tr>
<tr>
<td><a href="#">CARDIOLOGY</a></td>
<td><a href="#">5</a></td>
<td><a href="#">14</a></td>
<td><a href="#">67</a></td>
<td><a href="#">45</a></td>
<td><a href="#">43</a></td>
<td><a href="#">28</a></td>
<td><a href="#">36</a></td>
</tr>
<tr>
<td><a href="#">HEPATOLOGY</a></td>
<td><a href="#">2</a></td>
<td><a href="#">0</a></td>
<td><a href="#">1</a></td>
<td><a href="#">1</a></td>
<td><a href="#">1</a></td>
<td><a href="#">0</a></td>
<td><a href="#">1</a></td>
</tr>
<tr>
<td><a href="#">GASTROENTEROLOGY</a></td>
<td><a href="#">0</a></td>
<td><a href="#">4</a></td>
<td><a href="#">7</a></td>
<td><a href="#">0</a></td>
<td><a href="#">0</a></td>
<td><a href="#">0</a></td>
<td><a href="#">2</a></td>
</tr>
<tr>
<td><a href="#">PLASTIC SURGERY</a></td>
<td><a href="#">6</a></td>
<td><a href="#">0</a></td>
<td><a href="#">0</a></td>
<td><a href="#">8</a></td>
<td><a href="#">16</a></td>
<td><a href="#">5</a></td>
<td><a href="#">4</a></td>
</tr>
<tr>
<td><a href="#">UROLOGY</a></td>
<td><a href="#">3</a></td>
<td><a href="#">0</a></td>
<td><a href="#">0</a></td>
<td><a href="#">0</a></td>
<td><a href="#">0</a></td>
<td><a href="#">1</a></td>
<td><a href="#">2</a></td>
</tr>
</tbody>
</table>
推荐答案
这是一个解决方案：
http://jsfiddle.net/adamtsiopani/V4Ymr/8/
jQuery.fn.dataTableExt.oSort['numeric-html-asc'] = function(a,b) {
a = parseInt($(a).text());
b = parseInt($(b).text());
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['numeric-html-desc'] = function(a,b) {
a = parseInt($(a).text());
b = parseInt($(b).text());
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
};
$('.data-table').dataTable({
//set the sType to the custom type provided above
"aoColumns": [
null,
{ "sType": "numeric-html" },
{ "sType": "numeric-html" },
{ "sType": "numeric-html" },
{ "sType": "numeric-html" },
{ "sType": "numeric-html" },
{ "sType": "numeric-html" },
{ "sType": "numeric-html" }
]
});
