trigger - jQuery Tablesorter error

tablesorter mottie

Question

Acabo de actualizar 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 simplemente rompe todo mi Javascript. Si revierto 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

Acabo de encontrar este error, así que pensé que publicaría una respuesta en caso de que alguien más tuviera problemas con ella más adelante.

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

Este orden de eventos sería necesario cuando agregue o reemplace los datos de la tabla existente con datos nuevos 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 estar provocando el error. En el momento en que se maneja el evento "sorton", al DOM no se le ha asignado table.config.parsers, por lo tanto, el error.

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

Reemplace el enlace "sorton" existente 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 complemento útil. Gracias a Christian por lanzarlo.

Answer 2

El problema parece ser que si la tabla se llena a través de JavaScript, el ordenador no encuentra el contenido nuevo a menos que el navegador haya mostrado el contenido nuevo.

Activar 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 3

Encontré un caso cuando recibí ese mensaje de error sin actualizar específicamente tablesorter, pero solo porque el número de columnas en el elemento tfoot no coincidía con el número de columnas en thead y tbody , por lo que el complemento del tablesorter se confunde con eso.

Uno puede cometer ese error el mismo día que actualizar tablesorter. Pensé que también compartiría este truco en este tema, para futuras referencias.

Answer 4

Otra respuesta, en caso de que alguien se tope con el mismo escenario que yo. Aparentemente, el clasificador de tablas a veces le gusta tener un número coincidente de elementos <td> vacíos (al igual que los elementos de su encabezado) dentro del <tr> vacío. Mi ejemplo parcial esta abajo

<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 5

Poco tarde, pero es porque tienes un elemento vacío / no <tr> en el <tbody> , y espera al menos un <tr> .

Answer 6

Probé algunas de las respuestas anteriores, pero no ayudaron en todas las páginas que usamos tablesorter. La razón principal por la que pensé por error es que c = sortList [i] [0] no está definido porque tenemos una TR vacía o no tenemos la misma cantidad de TD que la de TH.

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

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

Answer 7

Tenga en cuenta que el ejemplo AJAX del ordenador de tablas solo muestra un escenario en el que se agregan nuevas filas a las existentes. Cuando la tabla se vacía y se rellena dinámicamente con nuevas filas, surge el error anterior.

Añadiendo una fila vacía

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

con el mismo número de <td> s que el número de <th> en el encabezado elimina el error pero introduce otro: después de que la tabla se vacía y se rellena con filas reales, las nuevas filas se agregan a las antiguas.

Como alternativa a la modificación del código fuente de 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);