2

パーセンテージがたくさんあるテーブルがあります。私はDataTablesを使用してテーブルの大部分を並べ替えています。右端の列HEREをチェックすると、テキスト ベースのパーセンテージが正しく並べ替えられます。

問題は...それを削除して、その左側のCSSバー(2番目の右端の列)に置き換えたいです。これらの CSS バーを DataTables で並べ替えることができません。

これが私がそれぞれで使用するコード<td>です...

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

HEREのパーセンテージ セクションのコードを使用して、右端の列で並べ替えるパーセンテージを取得しました。

上記のコードのすべての HTML タグを無視してパーセンテージだけで並べ替えるように DataTables を取得する方法はありますか?

ご協力いただきありがとうございます。さらに詳しい情報が必要な場合はお知らせください。

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

そして、そのページの Datatables に使用するオプションを次に示します (必要に応じて変更できます)。

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：解決しました

これが私がしたことです...このページに移動します。と をマージ 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

この問題には、プログラミング以外の解決策もあります。

金融やその他の多くの仕事の分野では、表のヘッダー行に単位 (%、$、€) を入れるのが一般的です。すべての行で記号を繰り返すのは無意味であり、ページが読みにくくなる可能性があります。

このオプションを検討するだけで、並べ替えの問題は解消されます。

于 2013-10-09T07:50:54.247 に答える
1

更新 2014:

ドキュメントから：

DataTables 1.10+ には、HTML 数値データ型の検出機能と並べ替え機能が組み込まれています。そのため、このプラグインは非推奨としてマークされていますが、古いバージョンの DataTable を操作する場合に役立つ場合があります。

非推奨の回答:

あなたが投稿したURLを確認したところ、次のような新しいものが見つかりました: Numbers with 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 に答える