2012-02-29 53 views
1

我在一個頁面上有多個html表格,每個表格都有一個標題行。當我點擊該列標題時,它應該按該列對所有表進行排序。我特別提到的列包含一個錨點,它爲文本顯示一個整數值。JQuery TinySort沒有正確排序數字

當我點擊列標題時,我遇到了錯誤的排序。假設我有這個屏幕負載以下:

83 
84 
104 

現在我單擊列標題,最後的結果就變成了:

104 
83 
84 

我寫交替排序按第二下,什麼碼發生的是104和84繞着83旋轉。我認爲發生的是它正在比較這些不正確。我已經用更大的數據集對它進行了測試,並且當任何數字不共享數字的位數時出現問題。

是否有任何東西(可能是我失蹤的國旗?)告訴這件事要正確排序?我所有更類似字符串的數據都可以正確排序。

代碼:

<html> 
<head> 
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" src="jquery.tinysort.min.js"></script> 
    <script language="javascript"> 
    var aAsc = []; 
    $(".SubHead").click(
     function() { 
      var nr = $(this).index(); 
      aAsc[nr] = aAsc[nr]=='asc'?'desc':'asc'; 
      $('.resultTable>tbody>tr:not(.SubHeadRow)').tsort("td:eq("+nr+")",{order:aAsc[nr]}); 
     } 
    ); 
    </script> 
</head> 
<body> 
    <table class="resultTable" border="1"> 
     <tr class="SubHeadRow"> 
      <td class="SubHead"> 
       <a href="#">ID</a> 
      </td> 
      <td class="SubHead"> 
       <a href="#">Application Header</a> 
      </td> 
      <td class="SubHead"> 
       <a href="#">Version Header</a> 
      </td> 
     </tr> 
     . 
     . 
     . 
    </table> 
    . 
    . 
    . 
</body> 

編輯: 這是鏈接的插件:http://tinysort.sjeiti.com/

上面我ammended的代碼,包括什麼樣的HTML看起來像一個樣本。我不是面前的,所以它可能不是100%。不是我懷疑它很重要,但是這些表是在ColdFusion 7MX中動態創建的。

+0

我不熟悉那個插件,但它看起來像是按字母順序排序而不是數字排序。 – asawyer 2012-02-29 23:18:19

+0

你能發佈html嗎? – elclanrs 2012-02-29 23:19:44

+0

@asawyer這正是我的想法。試圖找出如何讓它做數字化。編輯其他信息... – Rig 2012-03-01 00:29:36

回答

5

好吧,

我回答了我自己的問題。今天早上回顧了TinySort網站,我注意到了這個區域。花費數小時專注於此功能後,很容易看出它是如何被忽略的。答案是http://tinysort.sjeiti.com/,在下解析一個自定義的排序函數並做了一些小調整。

我創建了整數列的自定義大小寫,並傳遞了一個自定義比較函數。請看下圖:

var aAsc = []; 
$(".SubHead").click(
    function() { 
     var nr = $(this).index(); 
     aAsc[nr] = aAsc[nr]=='desc'?'asc':'desc'; 
     if(nr == 0){ 
      $('.resultTable>tbody>tr:not(.SubHeadRow)').tsort("td:eq("+nr+")", 
       { 
        sortFunction:function(a,b) { 
         var order = (aAsc[nr]=='asc')?1:-1; 
         var i = parseInt(a.s); 
         var j = parseInt(b.s); 
         if(i===j){ 
          return 0; 
         } else { 
          return (i > j)?order:-1*order; 
         } 
        } 
       } 
      ); 
     } else { 
      $('.resultTable>tbody>tr:not(.SubHeadRow)').tsort("td:eq("+nr+")",{order:aAsc[nr]}); 
     } 
    } 
); 
+3

TinySort應該提供將所有值視爲數字的選項。 – Gruber 2012-05-22 13:11:41

0

我已經通過創建數值的自定義字段中添加零到左邊以匹配所有值的長度,解決了這個問題。

<td data-sort="00000000181661 " class="sk_right">1.816,61 €</td> 
<td data-sort="00000000096260 " class="sk_right">962,60 €</td> 

var aAsc = []; 
function sk_sort_col(id, nr) { 
    aAsc[nr] = aAsc[nr] == 'asc' ? 'desc' : 'asc'; 
    $('table#' + id + '> tbody > tr ').tsort('td:eq(' + nr + ')', { attr: 'data-sort', order: aAsc[nr] });  
}