jquery tablesorter ajax tabla solo ordenando una dirección

Question

Tengo una tabla que cargo mediante un comando de carga jQuery. en la devolución de llamada de la función de carga, inicio el plugin de tablesorter. Por algún motivo, la mesa solo ordena descendiendo no ascendiendo. Aún más extraño, si sostengo shift, ¿se alternará correctamente entre asc y desc? ¿Alguna idea de lo que está pasando aquí?

table.php

<table id="xyz"> 
<thead> 
    <tr> 
     <th>hi</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>a</td> 
    </tr> 
    <tr> 
     <td>b</td> 
    </tr> 
    <tr> 
     <td>c</td> 
    </tr> 
</tbody> 
</table> 

jQuery

$("#myDiv").load("table.php", function() { 
    $("#xyz").tablesorter(); 
}); 

si no carga la tabla a través de ajax entonces las funciones tablesorter como se esperaba.

Answer 1

Bien, así que estaba doblemente atada como Jason pensó.

En realidad estaba llamando a la función de carga de jQuery en una clase y tenía dos divs con esa clase en mi página. ¿Así que en realidad estaba llamando a la función de devolución de llamada dos veces?

Creo que es un comportamiento un tanto extraño, ya que el contenido que se carga en ambos divs es el mismo, pero parece que jQuery hace una llamada ajax por separado para cada uno de los divs. ¡Gracias por tus comentarios!

Answer 2

El problema ya está resuelto, pero mencionaré que tuve el mismo problema. La razón estaba en la versión anterior de jquery: tenía 1.4.2, 1.4.4 era necesario.

Answer 3

Sólo pensé en arrojar otra respuesta aquí en caso de que alguien más se encuentre con esto. Esto me sucedió cuando intenté llamar al .tablesorter() en una tabla usando un selector de clase en lugar de un selector de id. Así cambiándolo de

$('.tablesorter').tablesorter();

a

$('#tablesorter').tablesorter();

(y el margen de beneficio para reflejar esto) fijado este problema para mí.

Answer 4

Una vez más, viendo cómo se ha resuelto esto, me gustaría compartir mi escenario diferente.

Mis filas cuerpo de la tabla se crean dinámicamente a partir de una llamada .ajax, una vez que un usuario agrega/modifica/elimina una fila, a continuación, las filas del cuerpo de la tabla son .removed() y recreado con la misma .ajax llamada a través function(). Esto, por supuesto, une dos veces el tablesorter ya que la cabeza de la mesa permanece, lo que causa un comportamiento extraño.

La corrección para mí fue a desenlazar el tablesorter antes de inicializar $('#mytable').addClass('tablesorter').tablesorter(); así:

$('#mytable') 
    .unbind('appendCache applyWidgetId applyWidgets sorton update updateCell') 
    .removeClass('tablesorter') 
    .find('thead th') 
    .unbind('click mousedown') 
.removeClass('header headerSortDown headerSortUp'); 

Otra solución podría ser la creación de toda la tabla en el .ajax llamada en lugar de sólo el cuerpo <tr> 's.

espero que esto ayude

Answer 5

he tenido el mismo problema, pero una configuración diferente, y las respuestas observadas en este hilo no había resuelto mi problema. Agregando la solución para mi escenario en caso de que alguien más tenga el mismo problema que yo tuve.

Las filas de mi cuerpo de tabla se crean dinámicamente a partir de una llamada .ajax en la carga de página y una columna se establece como la lista de clasificación predeterminada para ordenar después de cargar los datos.

5 de cada 10 columnas se vuelven a llenar según la presentación de un nuevo intervalo de fechas. No reconstruyo el cuerpo de la tabla, sino más bien inyecté los datos en los registros apropiados, luego recurrí en base a mi clasificación por defecto.

Mi problema era que después de enviar un nuevo intervalo de fechas, el tablesorter ahora se definía dos veces en el encabezado, por lo que al hacer clic en el encabezado se ordenaría dos veces, apareciendo para ordenar solo de una manera.

Mi solución fue evitar que el encabezado de tablesorter se inicializara dos veces. Al cargar la página, dejo que tablesorter tipo columna de la que yo puse en la propiedad sortList puse, pero cada día nueva gama votado, que el usuario las siguientes líneas para ordenar mi columna después de la carga de datos:

$('#mytableBody').trigger("update"); 
var sorting = [[5, 1]]; 
setTimeout(function() {$('#mytableBody').trigger('sorton', [sorting]) }, 1); 

utilizo setTimeout para garantizar que los datos estén completamente cargados antes de la clasificación.

Espero que esto ayude.