Jquery Tablesorter - ordenar por coluna com elementos

Question

Eu tenho uma tabela como esta:

|   Update   |   Name  |  Code      | modification date |
|            |   name1 | code1      | 2009-12-09        |
|            |   name2 | otehercode | 2007-09-30        | 

Quando a coluna de atualização contém caixas <input type='checkbox' />.

O estado inicial caixa de seleção é determinado antes do processamento da mesa, mas depois as linhas são obtidas a partir de banco de dados (ele é baseado no conjunto de condições, no lado do servidor).

A caixa de seleção pode ser marcada por padrão, desmarcado por padrão ou desativado (disabled='disabled' como atributo input).

Tablesorter

Eu estou usando de JQuery para classificar minhas tabelas. E eu gostaria de ser capaz de classificar pela coluna contendo as caixas de seleção. Como é possível (eu poderia passar alguns atributos adicionais para meu elemento input talvez, se ele iria ajudar ...)?
Devo escrever meu próprio analisador para lidar com isso?

Answer 1

Adicionar um período escondido, pouco antes da entrada, e incluir nele algum texto (que será usado para classificar a coluna). Algo como:

<td>
    <span class="hidden">1</span>
    <input type="checkbox" name="x" value="y">
</td>

Se necessário, você pode anexar um evento para a caixa de seleção para que ele modifica o conteúdo do irmão anterior (o tempo) quando marcada / desmarcada:

$(document).ready(function() {

    $('#tableid input').click(function() {
         var order = this.checked ? '1' : '0';
         $(this).prev().html(order);
    })

})

Nota:. Eu não tenho verificado o código, por isso pode ter erros

Answer 2

Esta é a versão mais completa / correto de resposta de Haart.

$(document).ready(function() {
    $.tablesorter.addParser({ 
        id: "input", 
        is: function(s) { 
            return false; 
        }, 
        format: function(s, t, node) {
            return $(node).children("input[type=checkbox]").is(':checked') ? 1 : 0;
        }, 
        type: "numeric" 
    });

    sorter = $("#table").tablesorter({"headers":{"0":{"sorter":"input"}}});
// The next makes it respond to changes in checkbox values 
    sorter.bind("sortStart", function(sorter){$("#table").trigger("update");});

}); 

Answer 3

Eu estou adicionando esta resposta porque eu estou usando a / bifurcada biblioteca jQuery TableSorter suportado com novas funcionalidades. Uma biblioteca de parser opcional para entrada / campos selecionados está incluído.

http://mottie.github.io/tablesorter/docs/

Aqui está um exemplo: http://mottie.github.io/tablesorter/docs/example-widget -grouping.html e é feito incluindo os entrada / selecione Biblioteca analisador "parser-input-select.js", acrescentando cabeçalhos objeto e declarando as colunas e analisar tipo.

headers: {
  0: { sorter: 'checkbox' },
  3: { sorter: 'select' },
  6: { sorter: 'inputs' }
}

analisadores adicionais incluídos são: data de análise (w / Sugar & DateJS), ISO8601 datas, meses, anos de 2 dígitos, dias da semana, à distância (pés / polegadas e métrica) e formato de título (remove "A" e "A") .

Answer 4

Você pode usar o tablesorter jQuery plugin e adicionar um analisador personalizado que é capaz de classificar todas as colunas da caixa de seleção:

$.tablesorter.addParser({
        id: 'checkbox',
        is: function (s, table, cell) {
            return $(cell).find('input[type=checkbox]').length > 0;
        },
        format: function (s, table, cell) {
            return $(cell).find('input:checked').length > 0 ? 0 : 1;
        },
        type: "numeric"
    });

Answer 5

Você pode adicionar um analisador personalizado para TableSorter, smth como este:

 $.tablesorter.addParser({ 
    // set a unique id 
    id: 'input', 
    is: function(s) { 
        // return false so this parser is not auto detected 
        return false; 
    }, 
    format: function(s) { 
        // Here we write custom function for processing our custum column type 
        return $("input",$(s)).val() ? 1 : 0; 
    }, 
    // set type, either numeric or text 
    type: 'numeric' 
}); 

E, em seguida, usá-lo em sua mesa

$("table").tablesorter(headers:{0:{sorter:input}});

Answer 6

Apenas um toque final para fazer a resposta de Aaron completa e evitar os erros de estouro de pilha. Então, além de usar a funcionalidade $.tablesorter.parser() como descrito acima, eu tive que adicionar o seguinte em minha página para torná-lo trabalhar com valores de caixa de seleção atualizados em tempo de execução.

    var checkboxCahnged = false;

    $('input[type="checkbox"]').change(function(){
        checkboxChanged = true;
    });

    // sorterOptions is a variables that uses the parser and disables
    // sorting when needed
    $('#myTable').tablesorter(sorterOptions);
    // assign the sortStart event
    $('#myTable')..bind("sortStart",function() {
        if (checkboxChanged) {
            checkboxChanged = false;
            // force an update event for the table
            // so the sorter works with the updated check box values
            $('#myTable')..trigger('update');
        }
    });

Answer 7

    <td align="center">
    <p class="checkBoxSorting">YOUR DATA BASE VALUE</p>
    <input type="checkbox" value="YOUR DATA BASE VALUE"/>
    </td>

//javascript
$(document).ready(function() {
$(".checkBoxSorting").hide();
});

Answer 8

Eu tentei várias das abordagens em outras respostas, mas acabou usando a resposta aceita de salgiza, com o comentário de Martin sobre a atualização do modelo de mesa. No entanto, quando eu implementada pela primeira vez, eu definir a linha de atualização dentro da caixa onchange gatilho, como no texto sugerido. Este reorganizados os meus fileiras na verificação de caixa / desmarcando, que eu achei muito confuso. As linhas apenas pulou fora em clique. Então, ao invés eu obrigado a funcionalidade de atualização do cabeçalho da coluna caixa de verificação real, de modo que as linhas só seriam reorganizadas ao clicar para atualizar a classificação. Ele funciona exatamente como eu quero que ele:

// checkbox-sorter is the assigned id of the th element of the checbox column
$("#checkbox-sorter").click(function(){ 
    $(this).parents("table").trigger("update");
});