Analyseur personnalisé pour JQuery Tablesorter

Question

J'utilise le jQuery Tablesorter et je rencontre un problème avec l'ordre dans lequel les analyseurs sont appliqués aux colonnes de la table. J'ajoute un analyseur personnalisé pour gérer la devise du formulaire $ -3.33.

$.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" 
}); 

Le problème semble être que l'analyseur de devises intégré a priorité sur mon analyseur personnalisé. Je pourrais mettre l'analyseur dans le code de tablesorter lui-même (avant l'analyseur de devise) et cela fonctionne correctement, mais ce n'est pas très maintenable. Je ne peux pas spécifier le classeur manuellement en utilisant quelque chose comme:

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

puisque les colonnes de la table sont générées dynamiquement à partir des entrées de l'utilisateur. Je suppose qu'une option serait de spécifier le trieur à utiliser comme une classe css et d'utiliser un peu JQuery pour spécifier explicitement un trieur comme le suggère this question, mais je préférerais m'en tenir à la détection dynamique si possible.

Answer 1

La première option consiste à attribuer aux colonnes ayant des valeurs de devise la classe supplémentaire "{'trieur': 'devise'}". Assurez-vous également que vous incluez les métadonnées du plugin, qui est pris en charge par tablesorter. Cela attirera les options per et expliquera explicitement à tablesorter comment trier.

<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> 

De plus, il y a un bug dans la fonction pour formater la devise: elle ne gère pas les nombres négatifs.

J'ai déposé un bug, et je travaille sur l'atterrissage d'un patch.

La deuxième option consiste à appliquer ce correctif à votre copie de tablesorter. Une fois que vous avez appliqué le correctif, vous n'avez pas besoin de spécifier le trieur de devises dans le th ou le td (spécifier dans le td est over-kill de toute façon).

Ligne d'édition 724 de jquery.tablesorter.js:

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

changement:

retour $ .tablesorter.formatFloat (s.replace (nouveau RegExp (/ [^ - 0-9.]/g),""));

cas:

• valeurs: -3 $, 1 $, ordre actuel 3

• $

  asc: 1 $, 3 $, $ - 3

• prévu pour asc -3 $, 1 $, 3

$ cas:

• valeurs: - 3 $, 1 $, ordre actuel 3

$

• asc: 1 $, 3 $, - 3

• $ prévu pour asc -3 $, 1 $, 3

  $

Answer 2

J'ai eu un problème similaire et j'ai découvert l'option textExtraction qui est recommandée lorsque vos cellules contiennent du balisage. Cependant, il fonctionne parfaitement comme formateur pré-format!

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

Answer 3

J'ai utilisé quelque chose comme ça et cela a fonctionné pour moi.

Utilisez cette classe dans l'en-tête < th class = "{'sorter': 'digit'}"> et dans la colonne < td class = "{'sorter': 'digit'}">.

Une fois fait, faites des changements dans le code javascript pour obtenir toute la monnaie sous la forme de chiffres.

C'est fait, profitez du tri !!!

Voici le code:

HEADER:

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

COLONNE (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; 
     } 
    } 
    });