jQuery DataTable標題 - 數字排序

我正在使用jQuery DataTables插件和標題 - 數字自定義排序插件。排序工作幾乎。我有包含像這樣一個隱藏的範圍元素的TD標籤的表...jQuery DataTable標題 - 數字排序

<td><span title="5">DATA HERE</span></td> 
<td><span title="4">DATA HERE</span></td> 
<td><span title="2">DATA HERE</span></td> 
<td><span title="17">DATA HERE</span></td> 
<td><span title="10">DATA HERE</span></td>

使用這些列隱藏標題數字排序，當DESC爲了我得到了冠軍的細胞按以下順序

5,4,2,17,10

我哪裏會想到是任何想法可能是錯誤排序爲

17,10,5,4,2

？這裏是我如何初始化表...添加

$(document).ready(function() { 
    $('#myTable').dataTable({ 
      "oLanguage": { "sSearch": "Filter Data" }, 
      "iDisplayLength": -1, 
      "bJQueryUI": true, 
      "sPaginationType": "full_numbers", 
      "aoColumns": [ 
       { "sType": "title-numeric" } 
      ] 
     }); 
});

插件代碼初始化表之前是在這裏：

jQuery.extend(jQuery.fn.dataTableExt.oSort, { 
    "title-numeric-pre": function (a) { 
     var x = a.match(/title="*(-?[0-9\.]+)/)[1]; 
     return parseFloat(x); 
    }, 

    "title-numeric-asc": function (a, b) { 
     return ((a < b) ? -1 : ((a > b) ? 1 : 0)); 
    }, 

    "title-numeric-desc": function (a, b) { 
     return ((a < b) ? 1 : ((a > b) ? -1 : 0)); 
    } 
});

來源

2014-02-25 Phil

任何人有任何想法?????? – Phil

看起來像它做一個字符串比較。在比較它們之前，您是否嘗試過使用parseInt函數將a和b轉換爲整數？

return ((parseInt(a) < parseInt(b)) ? -1 : ((parseInt(a) > parseInt(b)) ? 1 : 0));

等等

編輯：

我不知道那麼:( 這個確切的代碼工作對我來說：

<!DOCTYPE html> 
<html> 
    <head> 
     <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" /> 

     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
     <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script> 

     <meta charset=utf-8 /> 
     <title>Test</title> 
    </head> 
    <body> 
     <div class="container"> 
      <table id="mytable" class="display" width="100%"> 
       <thead> 
        <tr> 
         <th>Col1</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td><span title="5">This is 5</span></td> 

        </tr> 
        <tr> 
         <td><span title="4">This is 4</span></td> 
        </tr> 
        <tr> 
         <td><span title="2">This is 2</span></td> 

        </tr> 
        <tr> 
         <td><span title="17">This is 17</span></td> 
        </tr> 
        <tr> 
         <td><span title="10">This is 10</span></td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </body> 
</html>

以此爲JavaScript的：

jQuery.extend(jQuery.fn.dataTableExt.oSort, { 
    "title-numeric-pre": function (a) { 
     var x = a.match(/title="*(-?[0-9\.]+)/)[1]; 
     return parseFloat(x); 
    }, 

    "title-numeric-asc": function (a, b) { 
     return ((a < b) ? -1 : ((a > b) ? 1 : 0)); 
    }, 

    "title-numeric-desc": function (a, b) { 
     return ((a < b) ? 1 : ((a > b) ? -1 : 0)); 
    } 
}); 

$(document).ready(function() { 
    $('#mytable').DataTable({ 
    "oLanguage": { "sSearch": "Filter Data" }, 
      "iDisplayLength": -1, 
      "bJQueryUI": true, 
      "sPaginationType": "full_numbers", 
      "aoColumns": [ 
       { "sType": "title-numeric" } 
      ] 
    }); 
});

來源

2014-02-25 18:01:10 Kirbos

當我嘗試列不會再排序。 – Phil

@Kirbos只是出於好奇，是不是與OP給出的作爲（不工作）的例子相同的腳本？你忘了包括你的修改嗎？ – mainguy

這對我來說似乎也是一樣。這就是爲什麼我說我不確定問題是什麼，因爲（似乎）完全相同的代碼爲我工作。打我，@mainguy。編輯：我可以假設的唯一可能是OP可能沒有最新版本的.js或.css文件，因爲這是OP代碼中沒有顯示的唯一東西。 – Kirbos

好的，我不確定這裏有什麼問題。

我只是改變你的HTML第二列看到的排序更好，添加<tr>s和使用你的問題的代碼（只是刪除了UI的部分）。

<tr> 
    <td><span title="5">DATA HERE</span> 
     </td> 
     <td>5</td> 
    </tr> 
    <tr> 
    <td><span title="4">DATA HERE</span> 
    </td> 
    <td>4</td> 
    </tr>

當你看到這個plunker一切正常。

來源

2014-02-26 15:29:38 mainguy

這是我用我的標題數字排序擴展（我也想過濾掉任何非數字字符）：

$.fn.dataTableExt.oSort['title-numeric-asc'] = function (a, b) { 
    var x = a.match(/title="*(-?[0-9\.]+)/)[1]; 
    var y = b.match(/title="*(-?[0-9\.]+)/)[1]; 
    x = parseFloat(x); 
    y = parseFloat(y); 
    return ((x < y) ? -1 : ((x > y) ? 1 : 0)); 
}; 

$.fn.dataTableExt.oSort['title-numeric-desc'] = function (a, b) { 
    var x = a.match(/title="*(-?[0-9\.]+)/)[1]; 
    var y = b.match(/title="*(-?[0-9\.]+)/)[1]; 
    x = parseFloat(x); 
    y = parseFloat(y); 
    return ((x < y) ? 1 : ((x > y) ? -1 : 0)); 
};

來源

2014-02-27 17:31:21

jQuery DataTable標題 - 數字排序

回答

相關問題