javascript - 在也包含html的数据表中按百分比对列进行排序

Question

我有一张包含大量百分比的表格。我用 DataTables对我的大部分表格进行排序，如果您检查最右边的列 HERE ，基于文本的百分比确实正确排序。

问题是...我想删除它并将其替换为左侧的 CSS 栏(最右边的第二列)。我根本无法让这些 CSS 栏与 DataTables 一起排序。

这是我在每个 <td> 中使用的代码...

<div id="positive">
    <div class="anim" style="width:27%;">
        <div class="text">27.05%</div>
    </div>
</div>

我在 HERE 上使用了百分比部分中的代码获取在最右边的列上排序的百分比。

知道如何让 DataTables 忽略上述代码中的所有 HTML 标记并仅按百分比排序吗？

感谢您提供的任何帮助，如果您需要更多信息，请告诉我。

EDIT1:这是用于对文本百分比进行排序的代码

    jQuery.extend( jQuery.fn.dataTableExt.oSort, 
        {
        "percent-pre": function ( a ) 
            {
            var x = (a == "-") ? 0 : a.replace( /%/, "" );
            return parseFloat( x );
            },

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

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

这是我在该页面上用于数据表的选项(如果需要，我可以更改内容)。

编辑2:

    $(document).ready(function() 
        {
        $('#gradient-style').dataTable( 
            {
            "bPaginate": true,
            "aaSorting": [[ 7, "desc" ]],
            "bJQueryUI": true,
            "aLengthMenu": [[50, 100, 200, -1], [50, 100, 200, "All"]],
            "iDisplayLength": 50,
            "sPaginationType": "full_numbers",
            "sDom": '<"H"lf>rt<"F"ip>',
            "aoColumnDefs": [ { "bVisible": false, "aTargets": [ 0, 6 ] } ],

            "aoColumns": [
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            { "sType": "percent" },
            { "sType": "percent" } ]
            } );
        } );

EDIT3:解决了

这是我所做的...转到this page .合并 Numbers with HTML与 Percentage .这是我在 edit1 代码中更改的代码。

            /* This cuts out the HTML */
            var x = String(a).replace( /<[\s\S]*?>/g, "" );
            return parseFloat( x );
            /* This takes what's left, removes the % sign and sorts by that */
            var y = (x == "-") ? 0 : x.replace( /%/, "" );
            return parseFloat( y );

Answer 1

2014 年更新:

来自 the docs :

DataTables 1.10+ has HTML numeric data type detection and sorting abilities built-in. As such this plug-in is marked as deprecated, but might be useful when working with old versions of DataTables.

已弃用的答案:

我检查了 Url您发布并发现了一些新内容:带有 HTML 的数字，您尝试过了吗？根据文档，它将去除 html 标签并仅根据数字排序。

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "num-html-pre": function ( a ) {
        var x = String(a).replace( /<[\s\S]*?>/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));
    }
} );