jquery - bootstrap - tablesorter mottie
jQuery tablesorter-pérdida de funcionalidad después de una llamada AJAX (8)
Recientemente he estado experimentando con el complemento de tablesorter para jQuery. Lo logré y ejecuté con éxito en una ocasión, y estoy muy impresionado. Sin embargo, he tratado de aplicar el clasificador de tablas a una tabla diferente, solo para encontrar algunas dificultades ...
Básicamente, la tabla que causa un problema tiene una <ul> encima que actúa como un conjunto de pestañas para la tabla. así que si hace clic en una de estas pestañas, se realiza una llamada AJAX y la tabla se vuelve a llenar con las filas relevantes para la pestaña específica en la que se hace clic. Cuando la página se carga inicialmente (es decir, antes de que se haya hecho clic en una pestaña), la funcionalidad de tablesorter funciona exactamente como se esperaba.
Pero cuando se hace clic en una pestaña y la tabla se vuelve a llenar, la funcionalidad desaparece, y se muestra sin la característica ordenable. Incluso si vuelve a la pestaña original, después de hacer clic en otra, la funcionalidad no regresa; la única forma de hacerlo es una actualización física de la página en el navegador.
He visto una solución que parece similar a mi problema en este sitio, y alguien recomienda usar el complemento jQuery, livequery. Lo intenté pero fue en vano :-(
Si alguien tiene alguna sugerencia, estaría muy agradecido. Puedo publicar fragmentos de código si me ayuda (aunque sé que el código de creación de instancias para tablesorter está bien, ya que funciona en tablas sin pestañas, ¡así que definitivamente no es eso!)
EDITAR: según lo solicitado, aquí hay algunos fragmentos de código:
La tabla que se está ordenando es <table id="#sortableTable#">..</table> , el código de creación de instancias para tablesorter que estoy usando es:
$(document).ready(function()
{
$("#sortableTable").tablesorter(
{
headers: //disable any headers not worthy of sorting!
{
0: { sorter: false },
5: { sorter: false }
},
sortMultiSortKey: ''ctrlKey'',
debug:true,
widgets: [''zebra'']
});
});
Y traté de armar la livequery de la siguiente manera:
$("#sortableTable").livequery(function(){
$(this).tablesorter();
});
Esto no ha ayudado ... No estoy seguro de si debería usar el ID de la tabla con livequery ya que es el clic en <ul> que debería responder, que por supuesto no forma parte de la tabla en sí. He intentado una serie de variaciones con la esperanza de que una de ellas ayude, pero fue en vano :-(
¿Has intentado llamar?
$("#myTable").tablesorter();
después del código donde manejas el clic en la pestaña y repoblar la tabla ??? Si no, solo pruébalo.
Puede ser que cuando se crea su segunda tabla con ajax, necesite volver a enlazar los eventos. Es posible que desee utilizar el complemento LiveQuery
http://docs.jquery.com/Plugins/livequery
que podría ayudar "auto-mágicamente" con su problema.
editar: lo siento, simplemente vuelva a leer su publicación y vea que ya lo ha intentado.
Actualizar. He preparado un arnés de prueba rápido que, con suerte, ayudará. Hay 3 LI en la parte superior, cada uno tiene una forma diferente de actualizar los contenidos de la tabla. El último actualiza los contenidos y mantiene el orden
<script src="jquery-1.3.js" type="text/javascript" ></script>
<script src="jquery.livequery.js" type="text/javascript" ></script>
<script src="jquery.tablesorter.min.js" type="text/javascript" ></script>
<script>
var newTableContents = "<thead><tr><th>Last Name</th><th>First Name</th>
<th>Email</th><th>Due</th><th>Web Site</th></tr></thead>
<tbody><tr><td>Smith</td><td>John</td><td>[email protected]</td><td>$50.00</td>
<td>http://www.jsmith.com</td></tr><tr><td>Bach</td><td>Frank</td><td>[email protected]</td>
<td>$50.00</td><td>http://www.frank.com</td></tr></tbody>";
$(document).ready(function()
{
$("#addData").click(function(event){
$("#sortableTable").html(newTableContents);
});
$("#addLivequery").livequery("click", function(event){
$("#sortableTable").html(newTableContents);
});
$("#addLiveTable").livequery("click", function(event){
$("#sortableTable").html(newTableContents);
$("#sortableTable").tablesorter( { } );
});
$("#sortableTable").tablesorter( { } );
});
</script>
<ul>
<li id="addData" style="background-color:#ffcc99;display:inline;">Update Table</li>
<li id="addLivequery" style="background-color:#99ccff;display:inline;">Update Table with livequery</li>
<li id="addLiveTable" style="background-color:#99cc99;display:inline;">Update Table with livequery & tablesorter</li>
</ul>
<hr />
<table id="sortableTable">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jones</td>
<td>Joe</td>
<td>[email protected]</td>
<td>$100.00</td>
<td>http://www.jjones.com</td>
</tr>
<tr>
<td>French</td>
<td>Guy</td>
<td>[email protected]</td>
<td>$50.00</td>
<td>http://www.french.com</td>
</tr>
</tbody>
</table>
Estaba teniendo el mismo problema, excepto que estaba cargando una tabla que tenía una fila para cada ''categoría'' y luego insertando los datos para cada categoría en la tabla usando llamadas asíncronas. Llamar a $("#myTable").tablesorter(..) después de que se devolviera cada registro, provocó que mi navegador explotara cuando se cargaron más de un número trivial de registros.
Mi solución fue declarar dos variables, totalRecords y fetchedRecords . En $(document).ready() configuré los totalRecords a $("#recordRows").length; y cada vez que fetchedRecords un registro en la tabla, la variable fetchedRecords se incrementa y si fetchedRecords >= totalRecords entonces fetchedRecords >= totalRecords $("#myTable").tableSorter(..).
Funciona bastante bien para mí. Por supuesto, su kilometraje puede variar.
Resulta que tuve que hacer algunas modificaciones al código relacionado con AJAX para volver a llamar a $("#myTable").tablesorter(..) después de extraer cualquier dato ...
Una vez que haya agregado sus datos, haga esto:
$("your-table").trigger("update");
var sorting = [[0,0]];
$("your-table").trigger("sorton",[sorting]);
Esto permitirá que el complemento sepa que ha tenido una actualización y lo reordenará.
El ejemplo completo dado en el documento:
$(document).ready(function() {
$("table").tablesorter();
$("#ajax-append").click(function() {
$.get("assets/ajax-content.html", function(html) {
// append the "ajax''d" data to the table body
$("table tbody").append(html);
// let the plugin know that we made a update
$("table").trigger("update");
// set sorting column and direction, this will sort on the first and third column
var sorting = [[2,1],[0,0]];
// sort on the first column
$("table").trigger("sorton",[sorting]);
});
return false;
});
});
Desde el documento de tablesorter aquí: http://tablesorter.com/docs/example-ajax.html
Use la función ajaxStop y el código se ejecutará después de que se complete la llamada ajax.
$("#DivBeingUpdated").ajaxStop(function(){
$("table").tablesorter()
});
después de la llamada ajax cuando cambiaste tu contenido html necesitas actualizar TableSorter .
PRUEBA ESTO PARA MI TRABAJANDO BIEN
si anexas html
$("table tbody").append(html);
// let the plugin know that we made a update
$("table").trigger("update");
// set sorting column and direction, this will sort on the first and third column
var sorting = [[2,1],[0,0]];
// sort on the first column
$("table").trigger("sorton",[sorting]);
y cuando agregas un html nuevo en vez de otro
$("table").trigger("update");
$("table").trigger("sorton");
Me he encontrado con este problema recientemente. La solución de elwyn no funcionó para mí. Pero este tema sugirió que el problema está en la sincronización de funciones en eventos de "actualización" y "ordenar".
Si observa el código del código fuente de jQuery Tablesorter 2.0 (ver 2.0.5b), verá algo como:
$this.bind("update", function () {
var me = this;
setTimeout(function () {
// rebuild parsers.
me.config.parsers = buildParserCache(me, $headers);
// rebuild the cache map
cache = buildCache(me);
}, 1);
}).bind("sorton", function (e, list) {
$(this).trigger("sortStart");
config.sortList = list;
// update and store the sortlist
var sortList = config.sortList;
// update header count index
updateHeaderSortCount(this, sortList);
// set css for headers
setHeadersCss(this, $headers, sortList, sortCSS);
// sort the table and append it to the dom
appendToTable(this, multisort(this, sortList, cache));
});
Entonces, el problema es que setTimeout hace que sea menos probable que la actualización finalice antes de la clasificación. Mi solución fue implementar otro evento "updateSort", para que el código anterior se convirtiera en:
var updateFunc = function (me) {
me.config.parsers = buildParserCache(me, $headers);
cache = buildCache(me);
};
var sortFunc = function (me, e, list) {
$(me).trigger("sortStart");
config.sortList = list;
var sortList = config.sortList;
updateHeaderSortCount(me, sortList);
setHeadersCss(me, $headers, sortList, sortCSS);
appendToTable(me, multisort(me, sortList, cache));
};
$this.bind("update", function () {
var me = this;
setTimeout(updateFunc(me), 1);
}).bind("sorton", function(e, list) {
var me = this;
sortFunc(me, e, list);
}).bind("updateSort", function (e, list) {
var me = this;
updateFunc(me);
sortFunc(me, e, list);
});
Después de actualizar los datos en su tabla, debería activar solo este nuevo evento:
var sorting = [[0,0]];
$("#your-table").trigger("updateSort",[sorting]);