Buscar y ordenar texto con acentos en TinyTable v3

Después de algún tiempo usando uno de los mejores scripts JavaScript que encontré para la ordenación, búsqueda y paginación de tablas HTML he decidido hacerle algún cambio para corregir sus problemas en la ordenación y búsqueda de palabras con acentos.

Lo primero a realizar para poder desarrollar estas modificaciones, ha sido estudiar el funcionamiento del motor de TinyTable v3. Fruto de este he dado en la clave de las modificaciones necesarias para el correcto funcionamiento.

Eliminación de acentos y otros caracteres en JavaScript

Hay muchos códigos por internet sobre la eliminación de acentos, pero por algún motivo que no he llegado a encontrar en TinyTable no funcionaban correctamente y es por eso que realicé este script para la eliminación de acentos:

function til(t){
   var ts = '';
   for(var i=0;i<t.length;i++)
   {
      var c = t.charCodeAt(i);
      if(c >= 224 && c <= 230)
         ts += 'a';
      else if(c >= 232 && c <= 235)
         ts += 'e';
      else if(c >= 236 && c <= 239)
         ts += 'i';
      else if(c >= 242 && c <= 246)
         ts += 'o';
      else if(c >= 249 && c <= 252)
         ts += 'u';
      else
         ts += t.charAt(i);
   }
   return ts;
};

Podéis consultar las tablas de codificación de caracteres ASCII.

Modificaciones a TinyTable v3

Fichero tinytable/script-new.js

En el método search (sorter.prototype.search) es necesario llamar a til() para que el texto que viene del campo de búsqueda y el texto que compra en la tabla HTML sean procesados sin acentos, así como la comparación sea basada en estos:

sorter.prototype.search=function(f){
   var i=x=n=0, k=-1, q=til(T$(f).value.toLowerCase());
   if(this.p.colddid){k=T$(this.p.colddid).value}
   [...]
   for(x=s;x<e;x++){
      var b=til(r.cells[x].innerHTML.toLowerCase());
      if(b.indexOf(q)==-1){v=0}else{v=1; break}
   }
[...]

El método sort (sorter.prototype.sort) es el encargado de ordenar las columnas, pero la decisión sobre el orden lo hace el método cp() (comparation) y es aquí donde he tenido que realizar las modificaciones añadiendo el uso de til():

function cp(f,c){
   var g,h; f=g=til(f.v.toLowerCase()); c=h=til(c.v.toLowerCase());
   var i=parseFloat(f.replace(/(\$|\,)/g,'')), n=parseFloat(c.replace(/(\$|\,)/g,''));
[...]

Ejemplo y descarga

Aquí os dejo un ejemplo y el código para que lo podáis usar fácilmente.

Puedes ver un ejemplo aquí

Descargar código completo

Acerca de David Figueres Villaró

Vilanova i la Geltrú, Barcelona