Parseur personnalisé pour JQuery tablesorter

Question

J'utilise le jQuery tablesorter et ont un problème avec l'ordre dans lequel parseurs sont appliquées contre des colonnes de table . Je l'ajout d'un analyseur personnalisé pour gérer la monnaie de la forme -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 la priorité sur mon analyseur personnalisé. Je pourrais mettre l'analyseur dans le code tablesorter lui-même (avant que l'analyseur de monnaie) et il fonctionne correctement, mais ce n'est pas très maintenable. Je ne peux pas préciser la trieuse manuellement à l'aide quelque chose comme:

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

étant donné que les colonnes de la table sont générées dynamiquement à partir des entrées d'utilisateur. Je suppose que d'une option serait de spécifier la trieuse à utiliser comme une classe css et utiliser certains JQuery pour spécifier explicitement un trieur comme cette question suggère, mais je préfère rester avec la détection dynamique, si possible.

Answer 1

La première option est de donner les colonnes qui ont des valeurs de la classe monnaie supplémentaire « { « trieuse »: « monnaie »} ». Assurez-vous également vous incluez les métadonnées de plug-in, qui tablesorter supports. Cela va tirer dans les options de par élément et dire 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>

En outre, il y a un bogue dans la fonction pour formater la monnaie: il ne gère pas les nombres négatifs

.

Je suis un bug , et je travaille sur l'atterrissage d'un patch.

La deuxième option est d'appliquer ce correctif à votre copie de tablesorter. Une fois que vous avez appliqué le correctif, vous ne devez spécifier le trieur de monnaie dans la th ou td de (préciser dans le TD est trop tuer 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, $ 3

  

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

  

• prévu ordre de -3 $ asc, 1 $, 3 $

  

     

cas:

     

  

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

  

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

  

• prévu ordre de -3 $ asc, 1 $, 3 $

  

Answer 2

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

$('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 ça a marché pour moi.

Cette classe en-tête et dans la colonne .

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

Son, appréciez le 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;
        }
    }
  });