jQuery dataTable 列的自定义排序

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17806737/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 20:00:06  来源:igfitidea点击:

Custom Sorting of jQuery dataTable Columns

javascriptjquerysortingdatatable

提问by Matt Stow

I have a table which contains columns of numbers and NA.

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

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

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

NA, 100, 200, 300, 1024, 2096and2096, 1024, 300, 200, 100, NA

不适用, 100, 200, 300, 1024, 20962096, 1024, 300, 200, 100, 不适用

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

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

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

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

回答by Anjani

Simply use data-orderattribute in <td>element. Plugin will sort based on that. For your case the HTML will be:

只需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>

More HTML5 attributes are available to solve problems of filtering, sorting, searching, etc.

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

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

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

回答by Lucas

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.

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

so it becomes:

所以它变成:

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

and (notice the regex)

和(注意正则表达式)

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));
}});

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

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

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

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

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