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

Question

我的桌子上有很多百分比。 我使用DataTables对我的大多数表进行排序，如果您在此处检查最右边的列，则基于文本的百分比确实可以正确排序。

问题是...我想将其删除，然后将其替换为左侧（最右边第二列）的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));
            }
        } );

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

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

编辑3：解决了它

这就是我所做的...转至此页面 。 将Numbers with HTML带有Percentage Numbers with HTML合并。 这是我在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年更新：

从文档 ：

DataTables 1.10+具有内置的HTML数字数据类型检测和排序功能。 因此，此插件被标记为已弃用，但在使用旧版本的DataTables时可能会有用。

不建议使用的答案：

我检查了您发布的网址 ，发现了一些新内容：带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;
    }