arthurfurlan.org

Se você trabalha com .NET já deve ter notado que o código HTML gerado pelo framework não é o que podemos chamar de “um código bem estruturado”. Apesar disso, até agora isso nunca tinha me causado nenhum problema… Porém essa semana eu tive que fazer alguns malabarismos para poder utilizar o plugin TableSorter 2.0 da biblioteca jQuery em um projeto da empresa onde trabalho. O que eu estava tentando fazer era aplicar o plugin sobre uma tabela gerada pelo componente DataGrid do framework. O problema ocorreu porque plugin utiliza as linhas do <thead> da sua tabela para organizar a ordenação, mas o componente .NET não adiciona essa sessão ao código HTML da sua tabela.

Habilitando o TableSorter

Depois de algum tempo procurando por soluções prontas sem sucesso, eu implementei um código javascript para ser executado no evento onload da página que modifica a tabela adicionando o a sessão <thead> utilizada pelo TableSorter. Segue o código abaixo:

function _jQueryTableSorter_SemanticTable(tableId) {
    var table = document.getElementById(tableId)
    if (table == null)
        return false
    if (table.tHead != null && table.tHead.rows.length > 0)
        return true
    table.tHead || table.createTHead()
    var tHead = table.tHead
    var tFirstRow = table.rows[0]
    var tHeadRow = tHead.insertRow(0)
    tHeadRow.className = tFirstRow.className
    for (var i=0;i<tFirstRow.cells.length;i++) {
        var tHeadCell = tHeadRow.insertCell(tHeadRow.cells.length)
        tHeadCell.innerHTML = tFirstRow.cells[i].innerHTML
        tHeadCell.className = tFirstRow.cells[i].className
    }
    table.deleteRow(1);
    return true;
}

Isso acima resolveu o meu problema fazendo com que o plugin da jQuery conseguisse identificar o header da tabela e a ordenasse corretamente. Então caso encerrado, certo? Errado… O funcionamento correto do TableSorter acabou me gerando outro problema, pois a minha tabela possuia backgrounds alternados e no momento ordenação, essa alternância ficava completamente bagunçada.

Habilitando a alternância de estilos

Novamente procurando por solução prontas, eu encontrei na documentação do plugin uma solução pronta para o problema, porém que não não sei porque cargas d’águas não funcionou comigo. Para resolver agora o novo problema, eu desenvolvi um widget para trabalhar sobre o TableSorter. Segue o código abaixo:

function _jQueryTableSorter_AddWidgets() {
    $.tablesorter.addWidget({
        id: 'AlternatingRowStyle',
        format: function(table) {
            var tRows = table.tBodies[0].rows
            var classes = new Array;
            for (var i=0;i<tRows.length;i++) {
                var classExists = false
                for (var j=0;j<classes.length;j++)
                    if (classes[j] == tRows[i].className) {
                        classExists = true
                        break
                    }
                if (!classExists)
                    classes.push(tRows[i].className)
            }
            for (var i=0;i<tRows.length;i++)
                tRows[i].className = classes[i%classes.length];
        }
    });
}

Agora sim, problema resolvido! O TablerSorter funcionando perfeitamente nos DataGrid’s do .NET Framework.

Juntando os caquinhos

Para facilitar uso futuros eu ainda criei uma terceira que executa para executar as duas funções anteriores para mim, e o código final acabou ficando assim:

function jQueryTableSorter(tableId, options, defaultOrder) {
    _jQueryTableSorter_SemanticTable(tableId)
    _jQueryTableSorter_AddWidgets()
    $('#' + tableId).tablesorter(options || null)
    if (defaultOrder != undefined)
        $('#' + tableId).trigger('sorton', [ defaultOrder ]);
}

E agora, basta aplicar as funções acima sobre um DataGrid para habilitar ordenação client-side.

Botando para funcionar

Veja abaixo o exemplo da minha implementação, onde eu utilizo as funções acima juntamente com algumas outras configurações do TableSorter:

<script type="text/javascript">
    window.onload = function() { /* IE7 fix */
        var defaltOrder = [[ 2, 0 ]]
        jQueryTableSorter('dataGridId', {
            widgets:[ 'AlternatingRowStyle' ],
            sortInitialOrder:'asc',
            headers:{ 0:{ sorter:false } }
        }, defaultOrder)
    }
</script>

@todo unir essas funções para criar um plugin do plugin da jQuery :)

UPDATE: adicionado ao http://clientside.com.br/jquery-e-tablesorter-sobre-componentes-net/