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

Question

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

问题是...我想删除它并将其替换为左侧的 CSS 条（最右边的第二列）。我根本无法使用 DataTables 对这些 CSS 条进行排序。

这是我在每个<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));
            }
        } );

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

EDIT2：

    $(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+ 内置了 HTML 数字数据类型检测和排序功能。因此，此插件被标记为已弃用，但在使用旧版本的 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));
    }
} );

Answer 2

对于这个问题还有一个非编程的解决方案。

在金融和许多其他工作领域，通常将单位（%、$、€）放在表格的标题行中。在每一行上重复该符号是没有用的，并且可能会使您的页面的可读性略低于没有。

只要考虑这个选项，您的排序问题就会消失。

Answer 3

    $.fn.dataTableExt.afnSortData['num-sort'] = function(oSettings, iColumn) {
        var aData = [];
        $('td:eq(' + iColumn + ')', oSettings.oApi._fnGetTrNodes(oSettings)).each(function() { aData.push($(this).text().replace(/[^0-9\.]/g, '')); });

        console.log(aData);
        return aData;
    }