簡體   English   中英

使用jQuery插件dataTables的自定義排序科學計數法

[英]custom sorting scientific notation using jQuery plugin dataTables

我正在嘗試對這些數字進行排序:

<1E-8

0.000027

0.000061

0.0018

0.0094

<8.64e-12

0.049

“ <”表示真實值小於給定的數字。

這是我的“下降函數”,對此我很有信心:

$.fn.dataTableExt.oSort['scientific-desc'] = function(a,b) {
                    var x = a.replace(/^[<>]/g,"");
                    var y = b.replace(/^[<>]/g,"");
                    x = parseFloat(x);
                    y = parseFloat(y);

                    return ((x < y) ? 1 : ((x > y) ? -1 : 0));
}

而且我類似地定義了一個“上升函數”:

$.fn.dataTableExt.oSort['scientific-asc'] = function(a,b) {
                    var x = a.replace(/^[<>]/g,"");
                    var y = b.replace(/^[<>]/g,"");
                    x = parseFloat(x);
                    y = parseFloat(y);

                    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}

我已經使用了初始化代碼中的幾乎所有內容以及上面的排序函數,但是似乎無法使數字正確地在表中排序。 小於1E-8的數字通常總是在一起,帶有小寫字母“ e”的數字也總是在一起。

初始化dataTable的代碼如下。 可能值得注意的是,這是在AJAX調用中調用的代碼:

$.get('xyz.json',
    function(data) {
        // deal with json data 
        // get it ready for dataTable
        // ... 

    $('.table').dataTable( {
                    "sScrollY": "200px",
                    "aoColumns": [
                        null,
                        null,
                        {"bSortable": true, "sType": "scientific"},
                        {"bSortable": false}
                    ],
                    "aaSorting": [ [2,'asc'] ],
                    "bPaginate": false,
                    "bFilter": false,
                    "iDisplayLength": 5,
                    "bRetrieve": true,
                    "bDestroy": true
    } );
});

在你的榜樣,以“<”標志的數字在排序列表中彼此相鄰。

var A= ['<1E-8', 0.000027, 0.000061, 0.0018, 0.0094, '<8.64e-12', 0.049];

A.sort(function(a, b){
    var a1= String(a).replace(/^(<|>)/, ''),
    b1= String(b).replace(/^(<|>)/, '');
    return a1-b1;
}).join('\n');

<8.64e-12
<1E-8
0.000027
0.000061
0.0018
0.0094
0.049

//To have a decending sort, just reverse it-

 A.sort(function(a, b){
    var a1= String(a).replace(/^(<|>)/, ''),
    b1= String(b).replace(/^(<|>)/, '');
    return a1-b1;
}).reverse().join('\n');


0.049
0.0094
0.0018
0.000061
0.000027
<1E-8
<8.64e-12

為我對排序功能具有“高度信心”而服務。 在控制台上快速打印出a和b表明排序功能正在傳遞html實體

&lt;

而不是“ <”。

多虧了另一個stackoverflow線程

varTitle = $('<div />').html("Chris&apos; corner").text();

在DataTables中進行自定義排序的另一種方法是在表單元格中包含一些隱藏的內容:

<tr>
  <td>Large<input type="hidden" value="3"></td>
</tr>
<tr>
  <td>Small<input type="hidden" value="1"></td>
</tr>
<tr>
  <td>Medium<input type="hidden" value="2"></td>
</tr>

然后按隱藏值而不是顯示值排序:

// Tell DataTables to use this sort type always
$.fn.dataTableExt.aTypes.unshift(
   function () {
       return 'custom-sort';
   }
);


$.extend($.fn.dataTableExt.oSort, {
    // The selector
    "custom-sort-pre": function(a) {
        var sortValue = $(a).val();
        if (sortValue === undefined) {
            return a;
        }

        if (sortValue == 'NaN') {
            return NaN;
        }

        var floatValue = parseFloat(sortValue);
        if (isNaN(floatValue)) {
            return sortValue;
        }
        return floatValue;
    },

    // Asc sorting
   "custom-sort-asc": function (a, b) {
       if (isNaN(a) && !isNaN(b)) return 1;
       if (!isNaN(a) && isNaN(b)) return -1;
       if (isNaN(a) && isNaN(b)) return 0;

       if (a > b) return 1;
       if (a < b) return -1;
       return 0;
   },

    // Desc sorting
    "custom-sort-desc": function(a, b) {
        return $.fn.dataTableExt.oSort['custom-sort-asc'](a, b) * -1;
    }
});

此示例將適用於字符串和數字。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM