Niestandardowy analizator składni JQuery Tablesorter

Question

Używam jQuery Tablesorter i mam problem z kolejnością, w jakiej analizatory są stosowane względem kolumn tabeli. Dodaję niestandardowy analizator składni do obsługi waluty o wartości -3,33 USD.

$.tablesorter.addParser({ 
    id: "fancyCurrency", 
    is: function(s) { 
     return /^\$[\-]?[0-9,\.]*$/.test(s); 
    }, 
    format: function(s) { 
     s = s.replace(/[$,]/g,''); 
     return $.tablesorter.formatFloat(s); 
    }, 
    type: "numeric" 
}); 

Problem polega na tym, że wbudowany analizator walut ma pierwszeństwo przed moim własnym analizatorem składni. Mogę umieścić parser w samym kodzie tablesorter (przed parserem walut) i działa on poprawnie, ale nie jest to bardzo łatwe w utrzymaniu. Nie mogę określić sortownika ręcznie przy użyciu czegoś takiego:

headers: { 
    3: { sorter: "fancyNumber" }, 
    11: { sorter: "fancyCurrency" } 
} 

ponieważ kolumny tabeli są generowane dynamicznie z danych wejściowych użytkownika. Domyślam się, że jedną z opcji byłoby określenie sortownika do użycia jako klasy css i użycie JQuery do jawnego określenia sugerowanego sortera, takiego jak this question, ale jeśli to możliwe, wolę trzymać się dynamicznego wykrywania.

Answer 1

Pierwsza opcja to podanie kolumn, które mają wartości walutowe, dodatkowej klasy "{" sorter ":" waluta "}". Upewnij się, że dołączasz metadane wtyczki, które obsługuje tablesorter. Spowoduje to pobranie opcji poszczególnych elementów i wyraźne wskazanie tablesorterowi, jak sortować.

<link rel="stylesheet" href="/css/jquery/tablesorter/green/style.css" /> 
<script src="/js/jquery-1.3.2.js"></script> 
<script src="/js/jquery.ui.core.js"></script> 
<script src="/js/jquery.metadata.js"></script> 
<script src="/js/jquery.tablesorter.js"></script> 

<script> 
    $(document).ready(function() 
    { 
    $("#table").tablesorter(); 
    } 
    ); 
    </script> 
</head> 
<table id="table" class="tablesorter"> 
<thead> 
    <tr> 
    <th class="{'sorter':'currency'}">Currency</th> 
    <th>Integer</th> 
    <th>String</th> 
    </tr> 
</thead> 
<tbody> 
<tr> 
    <td class="{'sorter':'currency'}">$3</td> 
    <td>3</td> 
    <td>three</td> 
</tr> 
<tr> 
    <td class="{'sorter':'currency'}">-$3</td> 
    <td>-3</td> 
    <td>negative three</td> 
</tr> 
<tr> 
    <td class="{'sorter':'currency'}">$1</td> 
    <td>1</td> 
    <td>one</td> 
</tr> 
</tbody> 
</table> 

Występuje również błąd w funkcji formatowania waluty: nie obsługuje liczb ujemnych.

Złożyłem numer bug i pracuję nad wyładowaniem łaty.

Drugą opcją jest zastosowanie tej poprawki do kopii tablesortera. Po zastosowaniu poprawki nie musisz określać sortera walut w th lub td (w td jest określona opcja przeciążania).

Edycja linia 724 jquery.tablesorter.js:

powrotu $ .tablesorter.formatFloat (s.replace (New RegExp (/ [^ 0-9]./G), "")) ;

zmiana:

powrotnej $ .tablesorter.formatFloat (s.replace (new RegExp (/ [^ - 0-9.]/sol),""));

przypadku:

• wartości: $ -3 $ 1 $ 3

• bieżący rozkaz ASC: $ 1 $ 3 $ - 3

• spodziewaną asc $ -3 $ 1, $ 3

przypadek:

• wartości: - 3 $, $ 1 $ 3

• bieżący rozkaz ASC: $ 1 $ 3 - $ 3

• spodziewaną asc $ -3 $ 1 $ 3

Answer 2

Miałem podobny problem i odkryłem opcję textExtraction zalecaną, gdy komórki zawierają znaczniki. Jednak doskonale sprawdza się jako formater formatów wstępnych!

$('table').tablesorter({ 
    textExtraction: function(s) { 
    var text = $(s).text(); 
    if (text.charAt(0) === '$') { 
     return text.replace(/[^0-9-.]/g, ''); 
    } else { 
     return text; 
    } 
    } 
}); 

Answer 3

Użyłem czegoś takiego i to zadziałało.

Użyj tej klasy w nagłówku < th class = "{'sorter': 'digit'}"> oraz w kolumnie < td class = "{'sorter': 'digit'}">.

Po zakończeniu należy wprowadzić zmiany w kodzie javascript, aby uzyskać wszystkie waluty w postaci cyfr.

Gotowe, ciesz się sortowaniem !!!

tutaj kod:

Header:

<th style='width: 98px;' class="{'sorter':'digit'}"> 
      Amount 
    </th> 

KOLUMNY (TD):

<td align="left" style='width: 98px;' class="{'sorter':'digit'}"> 
      <%= Convert.ToDouble(a.AMOUNT ?? 0.0).ToString("C3") %> 
</td> 

JavaScript:

<script language="javascript" type="text/javascript"> 
    jQuery("#rewardtable").tablesorter({ 
    textExtraction: function (data) { 
     var text = $(data).text(); 
     if (text.toString().indexOf("-$") != -1) { 
      return ("-" + text.replace(new RegExp(/[^0-9.]/g), "")); 
     } 
     else if (text.toString().indexOf("$") != -1) { 
      return (text.replace(new RegExp(/[^-0-9.]/g), "")); 
     } 
     else { 
      return text; 
     } 
    } 
    });