SortTable Advanced

24/02, 2006 12:00 por Nlio Matos

Quem lhes posta hoje é Nélio Matos. Sem delongas, veja o SortTable em ação.

Há um tempo atrás precisei adaptar um aplicativo que fizemos no trabalho, que retornava uma tabela grande, cheia de cálculos de evoluções. Nossa solução original era requisitar pro servidor uma nova tabela, ordenada pela escolha do usuário.
Isso deixava tudo muito lento, dando time-out constantemente.

Até que um dia comecei a brincar com AJAX e encontrei uma página em que o cara reordenava uma lista (ul) no cliente. Pensei: se o cara faz isso com uma lista, posso fazer com uma tabela. O São Googlinho (mistura de Google com São Longuinho) me mostrou uma página (a mesma que você achou: http://www.kryogenix.org/code/browser/sorttable/) onde faziam o que eu precisava.
Ctrl+c, Ctrl+v, funcionava!! Meu chefe quase teve um orgasmo!! 2000 linhas ordenadas rapidamente!!

Mas a minha jornada não tinha terminado…

Encontrei alguns problemas no script original:

1. Ele ordenava tudo que estava abaixo da segunda linha da tabela. Se a tabela tinha um rowspan=2 na primeira linha, virava bagunça. E também ordenava junto o tfoot da tabela, impossibilitando o uso do rodapé.
2. Colspan também gera problema, pois ele atribui índice para as colunas, (0, da esquerda pra direita)
3. O jeito que a função original usava para determinar o tipo de dados para fazer a classificação da coluna era o seguinte: jogava numa variável o valor da primeira célula da coluna a ser classificada, usava o match para localizar alguns caracteres e determinava a função de classificação. Os problemas começavam quando o valor era negativo (-) ou tinha casas decimais (com vírgula) o JS ordenava como texto. O “11″ ficava menor que “2″.

As minhas soluções (particularmente, são gambiarras, sou novato no JS e DOM, acho que dá pra melhorar o script):

1. O script atual ordena somente a seção tbody da tabela, possibilitando o uso de linhas e colunas mescladas (rowspan e colspan) e a tag tfoot fica quietinha, lá embaixo.
2. A solução do meu 2º problema foi uma gambiarra, que não existia na função original. Inseri um argumento na função, o índice da coluna do tbody que será ordenada.
   Quando você usa colspan no thead, o índice fica diferente do índice do tbody. No meu exemplo o thead tem 6 elementos (índice de 0 à 5) e o tbody 5 elementos (0 à 4). A confusão dos índices aumenta quando o thead tem duas linhas. Então só achei essa alternativa, passar o índice da coluna do tbody para a função.
3. Como não sei mexer direito com a função match do JS, preferi passar outro argumento pra função sortTable: o tipo de dados que serão classificados. No original, ele procurava caracteres que identificavam o tipo de dados. Isso fazia que números negativos ou decimais (com vírgula, o padrão brasileiro) fossem interpretados como texto.
   Isso resolve em parte o problema com números. O JS acha que pontos são separadores de decimais e que vírgulas são separadores de milhar, o padrão americano. Por exemplo, ele interpretava o número 1.234.567 como 1,234. O que precisei fazer foi tratar os números antes de classificar o Array.
   Dei um replace no valor, retirando os pontos e trocando a vírgula por ponto.
   Como não existe a troca do conteúdo da célula, só a ordenação, não imprime isso na tabela. Ninguém precisa ver o replace…

Pronto! Tá funcionando!! Suei bicas pra chegar nessa solução. Praticamente aprendi a mexer com JS e DOM só pra fazer estas alterações.

O legal é que sua tabela fica semanticamente correta, com a aplicação das tags corretas pra construção da tabela.
Tentei até criar uma tabela só com divs, mas pra variar, não funcionou no IE…

Leia também o artigo ZebraTable, no ruf space.

Aqui estão os links que eu utilizei pra chegar nesta solução. São páginas sobre DOM, a maioria da MS.
http://www.furl.net/members/digito8

Aproveitando a deixa, uma dica: o Furl é um concorrente do del.icio.us, e eu achei muito melhor. Pode melhorar mais na interface, mais a busca é muito mais eficiente.

Este artigo foi publicado Friday, 24 de February de 2006 às 12:00 e foi categorizado como webstandards, Cookbook, DOM Lab. Você pode acompanhar os comentários deste post assinando o comment RSS (RSS 2.0 [?]). Você também pode comentar ou atrelar um trackback [?] daqui no seu site.