TableSorter 2.0.3 Edição Colspan

Question

Eu alguns problemas usando o TableSorter 2.0.3.

A primeira edição é quando eu defino um Colspan na minha mesa. Basicamente, quando faço isso como abaixo, ele não classifica as respectivas colunas.

<table> 
<thead> 
        <th colspan="3"></th>  
        <th>Four</th> 
        <th>Five</th>
        <th>Six</th>
        <th>Seven</th>  
</thead> 
<tbody> 
<tr> 
        <td>1</td> 
        <td>2</td> 
        <td>3</td> 
        <td>4</td>
        <td>5</td> 
        <td>6</td>
        <td>7</td>
</tr>  
</tbody> 
</table> 

A segunda edição que tenho é que, independentemente do que eu defina o SortinitialOrder ("Desc" ou "ASC") no Tablesorter.js, isso não tem nenhum efeito para tornar a classificação ascendente ou descendente quando for clicada.

Por favor, alguém pode ajudar?

Answer 1

Para resolver um problema, você pode criar seu próprio mapeamento de cabeçalhos para os dados de dados. Aqui está o que eu fiz para obter a funcionalidade da maneira que eu queria.

Eu adicionei o seguinte método ao Tablesorter.js:

function findInMap(map, index, reverse) {
    for(var i = 0; i < map.length; ++i) {
        if(map[i][reverse ? 1 : 0] == index) return map[i][reverse ? 0 : 1];
    }

    return index;
}

E também adicionou o seguinte a this.defaults

customMap: []

O, altere o seguinte método:

function setHeadersCss(table,$headers, list, css) {
    $headers.removeClass(css[0]).removeClass(css[1]);

    var h = [];
    $headers.each(function(offset) {
        if(!this.sortDisabled) {
            h[this.column] = $(this);                   
        }
    });

    var l = list.length; 

    for(var i=0; i < l; i++) {
        var header = list[i];
        var headerIndex = findInMap(table.config.customMap, header[0], true);
        h[headerIndex].addClass(css[header[1]]);
    }
}

Por último, mas não menos importante, adicione/altere o seguinte $headers.click(function(e) {

Adicionar:

var ia = findInMap(config.customMap, i, false);

Mudar:config.sortList.push([i,this.order]); Para config.sortList.push([ia,this.order]);

Quando você inicia, o TableSorter passa um customMap[[header_col_id, data_col_id]] No seu caso, será:

customMap[
    [2, 4],
    [3, 5],
    ...
]

Answer 2

O que você esperaria que acontecesse se clicasse em um cabeçalho com três colunas? Em qual coluna você espera que ela resolva? Em geral, para o TableSorter trabalhar, você precisa ter um cabeçalho para cada coluna.

sortInitialOrder Não parece ser mencionado na página da Web para TableSorter, mas existe no código. Eu só usei anteriormente:

sortList: [[5, 0]]

que inicialmente classificará ascendendo usando a 5ª coluna.

Answer 3

Eu meio que resolvi o problema, pois também queria que a tabela classifique apenas ascendente, alterei a linha 536 para this.order = this.count++ % 0; O que faz classificar como eu quero.

Em relação ao Colspan, tive que recorrer a ter Blank para classificar as respectivas colunas. Pode não ser uma marcação correta, mas não vejo outra maneira de consertar isso.

Answer 4

Eu resolvi um problema semelhante para mim mesmo com o seguinte patch no próprio código de tabelas;

Index: jquery.tablesorter.js
===================================================================
--- jquery.tablesorter.js   (.../original)  (revision x)
+++ jquery.tablesorter.js   (.../mine)  (revision y)
@@ -278,7 +278,10 @@
                     cache.row.push(c);

                     for (var j = 0; j < totalCells; ++j) {
-                        cols.push(parsers[j].format(getElementText(table.config, c[0].cells[j]), table, c[0].cells[j]));
+                        var cSpan = c[0].cells[j].colSpan || 1;
+                        while (cSpan--) {
+                            cols.push(parsers[j].format(getElementText(table.config, c[0].cells[j]), table, c[0].cells[j]));
+                        }
                 }

Tudo o que meu problema foi revertido; Eu tinha 2 colunas abrangendo 1 célula coletiva. Isso corrige todas as colunas depois que a coluna já está sendo classificada.