jQuery dataTable 列的自定义排序答案

【问题标题】：Custom Sorting of jQuery dataTable ColumnsjQuery dataTable 列的自定义排序
【发布时间】：2013-07-22 07:39:27
【问题描述】：

我有一个包含数字和 NA 列的表格。

<tr>
    <td>NA</td>
</tr>
<tr>
    <td>1024</td>
</tr>
<tr>
    <td>100</td>
</tr>
<tr>
    <td>200</td>
</tr>
<tr>
    <td>300</td>
</tr>
<tr>
    <td>2096</td>
</tr>

我正在尝试使用 jQuery dataTable 对列进行排序以生成以下内容：

NA, 100, 200, 300, 1024, 2096 和 2096, 1024, 300, 200, 100, NA

但通过阅读排序和插件文档无法弄清楚如何做到这一点。

我在这里创建了一个 Fiddle 代码：http://jsfiddle.net/stowball/rYtxh/，非常感谢您的帮助。

【问题讨论】：

如果你使用“-”而不是“NA”它工作正常这里是 js fiddle jsfiddle.net/stowball/rYtxh
@umesh25 谢谢，这真的很有趣！如果我没有得到任何其他解决方案，我可能不得不这样做。

标签： javascript jquery sorting datatable

【解决方案1】：

只需在<td> 元素中使用data-order 属性。插件将基于此排序。对于您的情况，HTML 将是：

<tr>
    <td data-order="-1">NA</td>
</tr>
<tr>
    <td data-order="1024">1024</td>
</tr>
<tr>
    <td data-order="100">100</td>
</tr>
<tr>
    <td data-order="200">200</td>
</tr>
<tr>
    <td data-order="300">300</td>
</tr>
<tr>
    <td data-order="2096">2096</td>
</tr>

更多 HTML5 属性可用于解决过滤、排序、搜索等问题。

https://datatables.net/examples/advanced_init/html5-data-attributes.html

【讨论】：

答案有帮助，引号的位置不对。
感谢@Ken 强调
感谢@Aziz Saleh 的编辑

【解决方案2】：

通过查看 Numbers with HTML 插件，您可以获取现有代码并修改正则表达式以查找负数，而不是剥离所有内容。使用它，您可以在“NA”周围放置一个 HTML 标记，并使用 HTML5 data-internalid 来存储集合的最低编号。

这样就变成了：

<td><a data-internalid="-1">NA</a></td>

和（注意正则表达式）

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"num-html-pre": function ( a ) {
    var x = String(a).replace(/(?!^-)[^0-9.]/g, "");
    return parseFloat( x );
},

"num-html-asc": function ( a, b ) {
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},

"num-html-desc": function ( a, b ) {
    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}});

然后在datatable中，设置type为num-html

$('table').dataTable({
    "aoColumns": [{ "sType": "num-html" }],
    "aaSorting": [[ 0, "desc" ]],
});

您可以在此处查看我的完整解决方案：http://jsfiddle.net/rYtxh/4/

【讨论】：