Vou mostrar neste artigo uma função para reorganizar as linhas de uma tabela a partir dos valores de suas colunas. Tive dúvidas sobre um título que dissesse isso em uma linha, mas achei que a idéia do data-grid ilustraria bem. A idéia é olhar a tabela por suas colunas e, a partir de um click no elemento <th> correspondente, classificar e reorganizar as linhas pelos valores na coluna escolhida.

Esse script foi criado a partir de um exemplo que consegui na internet há anos, não sei, mas se não me engano foi num site da Microsoft. Não havia informações autorais, mas a verdade é que quando digo "criado a partir de" significa que mudei bem a coisa.
O legal da função é que usa propriedades e métodos nativos do elemento <table> e de seus sub elementos, que quase não se vê e não são muito utilizados - coisa antiga, da época em que "Dom" era só para quem tinha algum talento especial e "Ajax" não passava de material de limpeza (rsrsrs).

Pois é, mas voltando ao presente, a semântica nos diz que as tabelas não são para criar estruturas de design, como se usava, mas para exibir dados "tabulares", aqueles que estamos acostumados a ver em forma de "planilhas", no Exel por exemplo. E junto com essa idéia, funções específicas foram criadas para que os dados exibidos tivessem alguma mobilidade. Propriedades como Table.rows, Table.cols, Table.tbody, Table.tBodies… quem usa isso? Bem, eu não. Mas adorei conhecê-las.

A função sortTable() deve ser definida como uma propriedade do(s) elemento(s) <table> em questão, dessa forma todos os dados estarão acessíveis, pois serão membros do mesmo objeto - isso deve acontecer no onload ou num script colocado abaixo do elemento, quando a tabela já existe efetivamente. Um detalhe importante é que precisaremos do também quase esquecido elemento <tbody>, que também possui a propriedade rows. Isso por quê dessa forma delimitamos o conteúdo a ser classificado, excluindo os cabeçalhos das colunas - senão ao clicar, o <th> - que também é incluído no objeto rows, entra na dança e pode ir para em qualquer linha, de acordo com seu texto.
A função lê o conteúdo do primeiro tbody da tabela - digo isso por que é lícito usar mais de um tbody em uma mesma tabela. Não iria funcionar direito.

Fazemos um loop pelas rows da tabela, colocando-os em um array, na mesma seqüência. Aí está o "segredo" da classificação: basta usar os métodos sort() e reverse() do objeto Array. Depois de rearrumar o array, refazemos a tabela a partir dele. Veremos que há duas funções necessárias para que sortTable funcione: generateCompareTRs - usada como parâmetro para o método Array.sort - e getColValue, que só aparecerá mais adiante. Veja a função principal:

A função generateCompareTRs() recebe o índice da coluna que servirá como base para a classificação e retorna uma outra função que será enviada para o método sort. Ela determina, segundo os valores a serem comparados, se a comparação será numérica ou baseada em strings e a função retornada será apropriada para os valores da coluna em questão.

Além dela há também a função getColValue(), que recebe um elemento <td> e busca por um conteúdo classificável. Veja a ordem de precedência no retorno da função:

• se há apenas texto, retorna o texto
• se há texto e TAGs, retorna apenas o texto
• se não há texto:
  • se há (na TD) o atributo "title", retorna seu valor
  • se o 1º elemento da TD é uma IMG:
    • se há o atributo "title", retorna seu valor
    • se há o atributo "alt", retorna seu valor
    • se não há alt nem title, retorna o atributo "src" da imagem
• se não é nenhum dos casos acima, retorna uma string vazia

Vejamos a getColValue():

Claro que se poderia fazer o mesmo usando apenas o DOM, mas é mais simples assim e estamos falando de IE 4 e NS 6 - praticamente não há falta de suporte dos navegadores. Contradizendo isso, a função generateCompareTRs usa o método localeCompare, da versão 5.6 do Javascript…

Independente de preferências, considero a função bastante útil e espero que seja de ajuda para alguém.

Veja aqui uma página de testes