jQuery dataTable列的自定义排序 [英] Custom Sorting of jQuery dataTable Columns

查看:1631
本文介绍了jQuery dataTable列的自定义排序的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一张表,其中包含数字列和NA。

I have a table which contains columns of numbers and 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 对列进行排序以产生以下结果:

I'm trying to use jQuery dataTable to sort the column to produce the following:

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

但无法弄清楚如何从阅读排序和插件文档。

but can't figure out how to do it from reading the sorting and plugins docs.

我在这里创建了一个小提琴代码: http://jsfiddle.net/stowball/rYtxh/ ,真的很感激一些帮助。

I've created a Fiddle of the code here: http://jsfiddle.net/stowball/rYtxh/ and would really appreciate some assistance.

推荐答案

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

By looking at the Numbers with HTML plugin you can take the existing code and modify the regex to look for negative numbers instead of stripping everything. Using that you can put together a HTML tag around the "NA" and use the HTML5 data-internalid to store the lowest number of the collection.

所以它变成: / p>

so it becomes:

<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中,将类型设置为num-html

Then in the datatable, set the type to num-html

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

您可以在这里看到我的完整解决方案: http://jsfiddle.net/rYtxh/4/

You can see my full solution here: http://jsfiddle.net/rYtxh/4/

这篇关于jQuery dataTable列的自定义排序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆