11

jquery.datatablesを使用して、datatables 列に数値を表示しています。数値は、1000 単位の間にスペースを入れるようにフォーマットされます ( のように123 456 789)。残念ながら、この数値の書式設定は、数値の並べ替えではなく文字列の並べ替えを引き起こします(この質問の最後のスクリーンショットを参照してください)。

私は次のことを確認しました。

  • function _fnSort(oSettings, bApplyClasses) {ソートのコア関数です。
  • この関数では、動的関数ソートアプローチが使用されます ( if (!window.runtime) {true の場合に実行されるもの) 。

  • 使用する文字列ソート関数は、次の 2 つの関数です。

    /*
* text sorting
*/
"string-asc": function(a, b) {
    var x = a.toLowerCase();
    var y = b.toLowerCase();
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
},

"string-desc": function(a, b) {
    var x = a.toLowerCase();
    var y = b.toLowerCase();
    return ((x < y) ? 1 : ((x > y) ? -1 : 0));
},

JavaScript に関する私の知識はかなり貧弱です。ここで最善のアプローチは何でしょうか?

  1. 文字列の並べ替え関数を微調整して、数千の書式設定されたケースを検出し、比較を行います (大規模なデータ セットでは、これはかなり遅くなると思います)。
  2. 何千ものフォーマット専用の数値ソート機能を提供しますか? その場合
    • それをどのようにコーディングしますか？
    • この特別な数値ソート機能を使用するために、コアのソート機能にどのように指示できますか?

並べ替えは次のようになります。

ここに画像の説明を入力

4

4 に答える 4

10

この種の値を並べ替えるには、次の並べ替え関数を使用できます。

var sortFunction=function(a, b)​{
    var ia = parseInt(a.split(' ').join(''), 10);
    var ib = parseInt(b.split(' ').join(''), 10);
    return ia-ib;
};

テスト ：

var data = ['3 333', '100 333', '22 000', '1 333'];
console.log(data.sort(sortFunction));

適切な数の値を使用すると、これは十分に高速になります。パフォーマンスの問題が検出されない場合は、データを強化しようとしないでください。

編集 ：

実際、ドキュメントは適切な（同様の）ソート機能を提案しています：

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "formatted_numbers-pre": function ( a ) {
        a = (a==="-") ? 0 : a.replace( /[^\d\-\.]/g, "" );
        return parseFloat( a );
    },

    "formatted_numbers-asc": function ( a, b ) {
        return a - b;
    },

    "formatted_numbers-desc": function ( a, b ) {
        return b - a;
    }
} );

この拡張機能を追加しsTypeたら、列の を設定するだけです。

于 2012-07-05T09:28:04.130 に答える
0

わかりました、多くの検索の後、別の解決策を見つけました。dystroyとAllan Jardineによって提案された解決策は確かにクリーンです。しかし、それは HTML に触れることを意味し、私の場合、HTML に触れると、以下のようなトリッキーなメッセージ ボックスが表示されます。

ここに画像の説明を入力

したがって、私の解決策は、JavaScript文字列ソートアルゴリズムに触れて、数値とテキストのケースを切り替えることです。次のようなものを使用してよりクリーンにできればいいのにと思いますがisDigit(sa.charAt[0])、すべての試みにもかかわらず機能しません。少なくともこのソリューションは機能し、顕著なパフォーマンス コストを意味するものではありません。

    /*
    * text + integer sorting
    */
    "string-asc": function(a, b) {
       var sa = a.toString();
       if(sa.length > 0) {
          // Don't know why, isDigit(sa.charAt[0]) doesn't work??
          var ca = sa.substring(0,1);
          if(ca === "0" || ca === "1" || ca === "2" || ca === "3" || ca === "4" || ca === "5" || ca === "6" || ca === "7" || ca === "8" || ca === "9") {
             var x1 = parseInt(a.split(' ').join(''), 10);
             var y1 = parseInt(b.split(' ').join(''), 10);
             return x1 - y1;
          }
       }
       var x = a.toLowerCase();
       var y = b.toLowerCase();
       return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    },

    "string-desc": function(a, b) {
        var sa = a.toString();
        if(sa.length > 0) {
           var ca = sa.substring(0,1);
           if(ca === "0" || ca === "1" || ca === "2" || ca === "3" || ca === "4" || ca === "5" || ca === "6" || ca === "7" || ca === "8" || ca === "9") {
              var x1 = parseInt(a.split(' ').join(''), 10);
              var y1 = parseInt(b.split(' ').join(''), 10);
              return y1 - x1;
           }
        }
        var x = a.toLowerCase();
        var y = b.toLowerCase();
        return ((x < y) ? 1 : ((x > y) ? -1 : 0));
    },
于 2012-07-06T09:37:01.987 に答える
0

次のように DataTable を構築するときに小数点を設定するだけです。

var main_table = $('#main_list').DataTable({
    ajax: {
        url: "/api/your/data",
        dataSrc: ''
    },
    columns: [
        { data: "Col1" },
        { data: "Col2" },
        { data: "Col3" },
        { data: "Col4" }
    ],
    language: {
        /* -----> */ "decimal": ",", // <---------
        "emptyTable": "Keine Daten in der Tabelle verfügbar",
        "info": "Anzeigen von _START_ bis _END_ von _TOTAL_ Einträgen",
        "infoEmpty": "Anzeigen von 0 bis 0 von 0 Einträgen",
        "infoFiltered": "(filtriert von_MAX_ Gesamteinträge)",
        "infoPostFix": "",
        /* -----> */ "thousands": ".", // <---------
        "lengthMenu": "_MENU_ Einträge anzeigen",
        "loadingRecords": "Laden...",
        "processing": "Verarbeitung...",
        "search": "Suche:",
        "zeroRecords": "Keine passenden Datensätze gefunden",
        "paginate": {
            "first": "Erste",
            "last": "Letzte",
            "next": "Nächste",
            "previous": "Vorherige"
        },
        "aria": {
            "sortAscending": ": aufsteigend sortieren",
            "sortDescending": ": absteigend sortieren"
        }
    },
    columnDefs: [
        {//set german formatting

            render: function (data, type, row) {
                return formatDE(data,2);
            },
            targets: [2, 4, 5]
        },
        {

            render: function (data, type, row) {
                return formatDE(data,0);
            },
            targets: [3]
        }
    ],
    pageLength: 50});

さらに掘り下げるとjquery.dataTables.js、すべての列値のタイプを決定し、フォーマットをキャッチする関数があることがわかります

于 2016-12-08T10:37:26.563 に答える
0

これを読んでいて、数字の間のスペースの完全な答えが欲しい人へ：

  jQuery.extend( jQuery.fn.dataTableExt.oSort, {
      "formatted_numbers-pre": function ( a ) {
        a = (a===" ") ? 0 : a.replace( /[^\d\-\.]/g, "" );
        return parseFloat( a );
      },

      "formatted_numbers-asc": function ( a, b ) {
        return a - b;
      },

      "formatted_numbers-desc": function ( a, b ) {
        return b - a;
      }
  } );

    $('.myTable').DataTable({
      "columnDefs": [
        { "type": "formatted_numbers", "targets": 4 }
      ],
    });
  }
于 2015-12-16T20:03:05.170 に答える