自定义排序jQuery dataTable列

时间:2013-07-23 09:45:32

标签: javascript jquery sorting datatable

我有一个包含数字列和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

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

我在这里创建了一个代码小提琴:http://jsfiddle.net/stowball/rYtxh/并且非常感谢一些帮助。

2 个答案:

答案 0 :(得分:17)

只需在data-order元素中使用<td>属性即可。插件将根据它进行排序。对于您的情况,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

答案 1 :(得分:14)

通过查看带有HTML插件的Numbers,您可以获取现有代码并修改正则表达式以查找负数而不是剥离所有内容。使用它,你可以在&#34; NA&#34;周围放置一个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));
}});

然后在数据表中,将类型设置为num-html

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

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