2

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

问题是......我想删除它并将其替换为左侧的 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));
            }
        } );

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

编辑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：解决了

这就是我所做的...转到此页面。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 );
4

3 回答 3

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));
    }
} );
于 2013-03-21T07:15:32.580 回答
1

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

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

只需考虑此选项，您的排序问题就会消失。

于 2013-10-09T07:50:54.247 回答
0 
    $.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;
    }
于 2013-06-18T12:45:12.773 回答