Analizador personalizado para JQuery Tablesorter

Question

Estoy usando el jQuery Tablesorter y tengo un problema con el orden en que los analizadores se aplican a las columnas de la tabla. Estoy agregando un analizador personalizado para manejar la moneda del formulario $ -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" 
}); 

El problema parece ser que el analizador de monedas incorporado tiene prioridad sobre mi analizador personalizado. Podría poner el analizador sintáctico en el código de la tabla de comandos (antes del analizador de monedas) y funciona correctamente, pero esto no es muy fácil de mantener. No puedo especificar el clasificador de forma manual utilizando algo como:

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

desde las columnas de las tablas se generan dinámicamente a partir de las entradas del usuario. Supongo que una opción sería especificar el clasificador para usar como clase css y utilizar algo de JQuery para especificar explícitamente un clasificador como this question, pero preferiría seguir con la detección dinámica si fuera posible.

Answer 1

La primera opción es dar a las columnas que tienen valores de moneda la clase adicional "{'sorter': 'currency'}". También asegúrese de incluir los metadatos del complemento, que admite tablesorter. Esto activará las opciones por elemento y le indicará explícitamente a tablesorter cómo ordenarlas.

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

Además, hay un error en la función para formatear la moneda: no maneja los números negativos.

He archivado bug, y estoy trabajando en el aterrizaje de un parche.

La segunda opción es aplicar esta revisión a su copia de tablesorter. Una vez que hayas aplicado la solución, no necesitarás especificar el clasificador de moneda en el th o td (especificar en el td es over-kill de todos modos).

línea Editar 724 de jquery.tablesorter.js:

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

cambio a:

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

caso:

• valores: $ -3, $ 1, $ 3

• actual orden ASC: $ 1, $ 3, $ - fin asc espera 3

• $ -3, $ 1, $ 3

caso:

• valores: - 3 $, $ 1, $ 3

• fin asc actual: $ 1, $ 3, - $ 3

• fin asc esperada $ -3, $ 1, $ 3

Answer 2

Tuve un problema similar y descubrí la opción textExtraction que se recomienda cuando tus celdas contienen marcas. Sin embargo, funciona perfectamente como formateador de formato previo.

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

Answer 3

He usado algo como esto y funcionó para mí.

Utilice esta clase en el encabezado < th class = "{'sorter': 'digit'}"> y en la columna < td class = "{'sorter': 'digit'}">.

Una vez hecho esto, realice cambios en el código de JavaScript para obtener toda la moneda en forma de dígitos.

Hecho, disfruta de la clasificación !!!

Aquí está el código:

HEADER:

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

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