jQuery Error de Tablesorter

Question

Acaba de actualizarse al último tablesorter y parece que está roto o algo así. Cada vez que intento abrir mi página, Firebug dice:

table.config.parsers no está definido

Y que sólo se rompe toda mi Javascript. Si reverso la versión de tablesorter, funcionará bien.

Javascript:

$("#List").tablesorter({ 
    widgets: ['zebra'], 
    headers: { 
     4: { sorter: false } 
    } 
}) 

HTML:

<table id="List" class="tablesort ui-widget-content ui-corner-top"> 
    <thead> 
     <tr class="ui-widget"> 
      <th>Pa&iacute;s</th> 
      <th>ISO</th> 
      <th>ISO3</th> 
      <th>CODE</th> 
      <th>&nbsp;</th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

Answer 1

poco tarde, pero, es porque tiene una/no <tr> elemento vacío en el <tbody>, y se espera que al menos un <tr>.

Answer 2

Acabo de enterarme de este error, así que pensé en publicar una respuesta en caso de que alguien más tuviera problemas para hacerlo más tarde.

Aunque la respuesta anterior no lo menciona, pude replicar el error al crear primero una instancia de tablesorter() y luego activar una solicitud de clasificación.

Esta orden de los acontecimientos sería necesario cuando añadir o sustituir datos de tabla existentes con nuevos datos a través de AJAX o de otra manera, así:

// populate our table body with rows 
$("#myTable tbody").html(json.tbody); 

// let the sorting plugin know that we made a update 
$("#myTable").trigger("update"); 

// set sorting column and direction, this will sort on the first and third column 
var sorting = [[2,1],[0,0]]; 

// sort 
$("#myTable").trigger("sorton",[sorting]); 

La combinación de la "actualización" y el evento "sortOn" parece desencadenar el error. En el momento en que se maneja el evento "sorton", el DOM no ha sido asignado a table.config.parsers - por lo tanto el error.

La solución es envolver el manejo de eventos "sorton" en un tiempo de espera de 1 milisegundo.

Reemplazar el enlace existente "sortOn" en jquery.tablesorter.js (línea ~ 803) con lo siguiente:

}).bind("sorton", function (e, list) { 
    var me = this; 
    setTimeout(function() { 
     $(this).trigger("sortStart"); 
     config.sortList = list; 
     // update and store the sortlist 
     var sortList = config.sortList; 
     // update header count index 
     updateHeaderSortCount(me, sortList); 
     // set css for headers 
     setHeadersCss(me, $headers, sortList, sortCSS); 
     // sort the table and append it to the dom 
     appendToTable(me, multisort(me, sortList, cache)); 
    }, 1); 

tablesorter() es realmente un práctico plugin. Gracias a Christian por liberarlo.

Answer 3

Otra respuesta en caso de que alguien alguna vez se encuentre con el mismo escenario que yo. Aparentemente, al clasificador de tablas a veces le gusta tener un número coincidente de elementos <td> vacíos (lo mismo que los elementos del encabezado) dentro del <tr> vacío. Mi ejemplo parcial está por debajo de

<thead> 
    <tr> 
     <th class="{sorter: 'text'}'' "><a href="javascript:;" title="Sort" class="arrow"><span>Network Name</span></a></th> 
     <th class="{sorter: 'text'} "><a href="javascript:;" title="Sort" class="arrow"><span>Type</span></a></th> 
     <th class="{sorter: false}"><a href="javascript:;" title="Sort" class="arrow"><span>Interconnections</span></a></th> 
     <th class="{sorter: false}">&nbsp;</th> 
    </tr> 
</thead> 

<tbody> 
    <tr style="display:none"><td></td><td></td><td></td><td></td></tr>......................... 

Answer 4

Probé algunas de las respuestas anteriores, pero no ayudaron en cada página que usábamos tablesorter. La razón principal que calculé por error es que c = sortList [i] [0] no está definido porque tenemos un TR vacío o no tenemos el mismo número de TD que el de TH.

Tenía 8 TH/TD en caso de tener datos de la mesa y 8 TH & TD solo en caso de que no tenga nada que mostrar. Me las arreglé para verificar si no tengo datos de tablas, entonces no llamo a tablesorter para ordenar columnas específicas que no existen. Esto hizo el truco.Podría ayudar a alguien con escenario similar

if(tableData.length != 0){ 
 
    $("#myid").tablesorter({sortList: [[2,0]]}); 
 
}

Answer 5

El problema parece ser que si la mesa se llena a través de JavaScript del tablesorter no encuentra el nuevo contenido a menos que el navegador ha mostrado el nuevo contenido.

Disparar el tablesorter dentro de una rutina setTimeout() eliminó ese error para mí.

function initPage() { 
     fillMyTable(); 
     // Init table sorter, but give the browser a second to draw the new table 
     setTimeout(function(){ $("#my_table").tablesorter(); }, 1000); 
    } 

Answer 6

Tenga en cuenta que la tablesorter AJAX example sólo demuestra un escenario en el que las nuevas filas son adjunta a los ya existentes. Cuando la tabla se vacía dinámicamente y se rellena con nuevas filas, aparece el error anterior.

Adición de una fila vacía

<tr style="display:none"><td></td>...<td></td></tr> 

con el mismo número de <td> s como el número de <th> s en la cabecera elimina el error, pero introduce otro: después de la tabla se vacía y se vuelve a llenar con filas reales, las nuevas filas se añaden a las antiguas.

Como alternativa a la modificación del código fuente tablesorter, pruebe la siguiente secuencia de invocación:

$("#my-table").trigger("update"); 
setTimeout(function() { 
    /* e.g. sort by the second column in descending order */ 
    var sorting = [[1, 1]]; 
    $("#my-table").trigger("sorton", [sorting]); 
}, 100);