css

Tablesorter: configurações e mapeamentos via classes css

Deixe um comentário
Olá pessoal
Ao utilizar o plugin tablesorter, tive alguns problemas com ordenação de valores, datas e outros atributos. Acabei pesquisando e vi que não era o único.
Vi algumas soluções baseadas no plugin Jquery metadata, mas estava querendo evitar este overhead, já que posso trabalhar com configurações de classes a partir do próprio jquery.
Baseado em uma solução proposta no próprio stackoverflow (http://stackoverflow.com/questions/5672993/how-to-ignore-th-with-specific-class-name-in-tablesorter), acabei criando uma própria com os seletores.
Baixe o arquivo tablesorter no site do projeto
Abra o arquivo jquery.tablesorter.js e modifique:
– A variável “defaults” vai ficar com mais um atributo abaixo da chave debug : false
    debug: false,
noSorterClass: 'no-sorter'
– O método “checkHeaderMetadata” agora irá utilizar o valor da classe configurada para não inserir a coluna como “sortable”
function checkHeaderMetadata(cell, noSorterClass) {
if ((($.metadata) && ($(cell).metadata().sorter === false)) || $(cell).hasClass(noSorterClass)) {
return true;
};
return false;
}
E agora iremo modificar o método que utiliza o checkHeaderMetadata para que envie o valor da classe configurada. O método que o utiliza é o buildHeaders:
modifique o conteúdo
if (checkHeaderMetadata(this) || checkHeaderOptions(table, index)) this.sortDisabled = true;
por este

if (checkHeaderMetadata(this, table.config.noSorterClass) || checkHeaderOptions(table, index))    this.sortDisabled = true;
Agora em um arquivo javascript insira as configurações do tablesorter. Utilizei as configurações padrão do próprio plugin Tablesorter, então só vamos inserir o seguinte código:

$(function() {
function setupTablesorter() {

$.tablesorter.addParser({
id: "money",
is: function(s) {
return true;
},
format: function(s) {
return $.tablesorter.formatFloat(s.replace(/ /, '').replace('R$', '').replace(/\./, '').replace(/\,/, '.').replace(new RegExp(/[^0-9,]/g),""));
},
type: "numeric"
});


var classHeaders = {
'text': '.sorter-text',
'digit': '.sorter-digit',
'currency': '.sorter-currency',
'ipAddress': '.sorter-ipAddress',
'url': '.sorter-url',
'isoDate': '.sorter-isoDate',
'usLongDate': '.sorter-usLongDate',
'shortDate': '.sorter-shortDate',
'time': '.sorter-time',
'metadata': '.sorter-metadata',
'digit': '.sorter-digit',
'money': '.sorter-money',
};
        var tableHeaders = '', separator;
        $('.tablesorter').each(function (i, e) {
            var self = $(this);
$.each(classHeaders, function(key, value){
self.find(key).each(function (pos) {
                    if(separator == undefined)
separator = ',';
                    tableHeaders += separator +' '+ $(this).index()+' : { sorter: "'+key+'"}';
});
});
            $(this).tablesorter({ widgets: ['zebra'], dateFormat: 'uk', noSorterClass: 'no-sorter', headers: tableHeaders });
});
}
    if($('.tablesorter')[0])
setupTablesorter();
});
E agora é cria a tabela e inserir a classe “tablesorter” e as classes referentes a cada configuração em suas respectivas tags “th” e pronto! Está feito!Os arquivos estão disponíveis no meu Github para quem quiser porpôr melhores soluções. e farei um gist com eles.
Obrigado a todos e até mais!