Jquery Tablesorter - ordenar por columna que tiene elementos

Question

Tengo una tabla como la siguiente:

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

Cuando en la columna de la actualización contiene casillas de verificación <input type='checkbox' />.

El estado inicial casilla de verificación se determina antes de renderizar la mesa, pero después de que las filas se obtienen de la base de datos (que se basa en conjunto de condiciones, en el lado del servidor).

La casilla de verificación se puede comprobar de forma predeterminada, sin control por defecto o desactivado (disabled='disabled' como atributo input).

Estoy usando Tablesorter de jQuery para ordenar mis mesas. Y me gustaría ser capaz de ordenar por la columna que contiene las casillas de verificación. ¿Cómo es posible (que podría pasar algunos atributos adicionales a mi elemento input tal vez, si ayudaría ...)?
¿Debo escribir mi propio analizador de manejar eso?

Answer 1

Añadir un lapso escondido justo antes de la entrada, e incluir en ella un poco de texto (que se utilizará para ordenar la columna). Algo así como:

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

Si es necesario, se puede adjuntar un evento para la casilla de verificación para que se modifica el contenido del hermano anterior (margen) en caso de control / sin control:

$(document).ready(function() {

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

})

Nota:. No he comprobado el código, por lo que podría tener errores

Answer 2

Esta es la versión más completa / correcta de la respuesta de la TARGA.

$(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

Estoy añadiendo esta respuesta porque estoy usando una biblioteca apoyado / bifurcada jQuery TableSorter con nuevas características. Una biblioteca analizador opcional para los campos de entrada / SELECT está incluido.

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

Este es un ejemplo: http://mottie.github.io/tablesorter/docs/example-widget -grouping.html y se hace mediante la inclusión de la entrada / selección biblioteca analizador "parser-input-select.js", añadiendo un objeto de cabeceras y declarando las columnas y de análisis sintáctico tipo.

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

programas de análisis adicionales que se incluyen son: fecha de análisis sintáctico (w / Azúcar y Datejs), fechas ISO8601, mes, año 2 dígitos, los días de semana, la distancia (pies / pulgadas y métrica) y el formato del título (quita "A" y "La") .

Answer 4

Puede utilizar el tablesorter jQuery plugin y agregar un analizador personalizado que es capaz de ordenar todas las columnas de casillas de verificación:

$.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

Se puede añadir un analizador personalizado a TableSorter, SMTH como esto:

 $.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' 
}); 

Y luego utilizarlo en su tabla

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

Answer 6

Sólo un toque final para hacer la respuesta de Aaron completa y evitar los errores de desbordamiento de pila. Así, además de utilizar la funcionalidad $.tablesorter.parser() como se describió anteriormente, he tenido que añadir lo siguiente en mi página para que funcione con los valores actualizados de casilla de verificación en tiempo de ejecución.

    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

He intentado varios de los enfoques en las otras respuestas, pero terminó usando la respuesta aceptada de salgiza, con el comentario de Martin acerca de la actualización del modelo de tabla. Sin embargo, cuando por primera vez se implemente, me puse la línea de actualización dentro de la casilla de verificación onchange gatillo, al igual que el texto propuesto. Este reorganizado mis filas de comprobación / desmarcando la casilla de verificación, que me pareció muy confuso. Las líneas de distancia subimos al hacer clic. Así que en lugar até la funcionalidad de actualización de la cabecera de la columna casilla de verificación real, de manera que las líneas sólo se reordenan cuando se hace clic para actualizar la clasificación. Funciona del mismo modo que yo quiero que:

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