Ejemplo sencillo con jQuery y TableSort que no funciona

combuilder · #1 (**permalink**) 21/02/2011, 06:17

Hola.
Estoy intentando hacer un ejemplo muy básico que no consigo que funcione correctamente.

OBJETIVO: Tengo una web muy simple, con solo un elemento <a>, que cuando es pulsado carga unos datos mediante AJAX.

OBJETIVO 2: Una vez cargada la tabla, quiero aplicar TableSort.

LA primera parte la he conseguido, pero la segunda ... no consigo.

Pongo los códigos:

Código HTML:

<html>

<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.tablesorter.min.js" type="text/javascript"></script>
<script>
$(function( ){
	$("#miboton").bind("click", loading);
});
function loading(event)
{
	$("#tablamaestra2").load('data.htm');
	$("#tablamaestra").sorttable();
	$("#tablamaestra").trigger("update");
	$("#tablamaestra").trigger("appendCache");
}
</script>

<title>Ejemplo jQuery</title>

</head>

<body>

<a id="miboton">Ver 2</a>
<br>
<div id="tablamaestra2">aqui</div>

</body>

</html>

Ahora los datos a cargar data.htm:

Código HTML:

<table id="tablamaestra">
 <thead>
  <tr>
   <th>Test</th>
   <th>Col 2a</th>
   <th>Col 3a</th>
   <th>C4 a</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>static col 1</td>
   <td>static col 1</td>
   <td>static col 1</td>
   <td>static col 1</td>
  </tr>
  <tr>
   <td>a col 2</td>
   <td>B col 2</td>
   <td>static col 2</td>
   <td>static col 2</td>
  </tr>
  <tr>
   <td>static col 3</td>
   <td>static col 3</td>
   <td>static col 3</td>
   <td>static col 3</td>
  </tr>
  <tr>
   <td>Dstatic col 4</td>
   <td>static col 4</td>
   <td>static col 4</td>
   <td>static col 4</td>
  </tr>
 </tbody>
</table>

Pues eso ... a ver si alguien me ilumina!

Soujiro_Valk · #2 (**permalink**) 21/02/2011, 15:04

kizas los datos traidos por ajax no se agregaron al dom, para eso tienes que hacerlo con el evento .live()

combuilder · #3 (**permalink**) 22/02/2011, 01:06

Pues .... sigue sin funcionar

Código HTML:

<html>

<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.tablesorter.min.js" type="text/javascript"></script>

    <link href="styles.css" type="text/css" rel="stylesheet">
    <link href="tablamaestra2.css" type="text/css" rel="stylesheet">
<script>
$(function( ){
	$("#miboton").live("click", loading);
});
function loading(event)
{
	$("#tablamaestra2").load('data.htm');
	tableando();

}
function tableando() {
	alert("ok0");
	$("#tablamaestra").sorttable();
	alert("ok1");
	$("#tablamaestra").trigger("update");
	alert("ok2");
	$("#tablamaestra").trigger("appendCache");
	alert("ok3");
};
</script>

<title>Ejemplo CSS</title>

</head>

<body>

<a id="miboton">Ver 2</a>
<br>
<div id="tablamaestra2">aqui</div>


</body>

</html>

Da error entre el OK0 y el OK1, o sea, al aplicar a la tabla el método "tablesort"

combuilder · #4 (**permalink**) 22/02/2011, 06:42

¿Nadie puede echarme una mano en resolver este "sencillo" ejemplo?

masterpuppet · #5 (**permalink**) 22/02/2011, 07:16

Proba asi:

Código Javascript:

Ver original...
function loading(event)
{    
    $("#tablamaestra").load('data.htm', function(){
        $(this).sorttable();
        $(this).trigger("update");
        $(this).trigger("appendCache");
     });
}
$(function( ){
    $("#miboton").bind("click", loading);
});

Saludos.

combuilder · #6 (**permalink**) 22/02/2011, 07:59

Pues ... no funciona! Ni siquiera es capaz de cargar data.htm!!

Aqui tienes el código

Código HTML:

<html>

<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.tablesorter.min.js" type="text/javascript"></script>

    <link href="styles.css" type="text/css" rel="stylesheet">
    <link href="tablamaestra2.css" type="text/css" rel="stylesheet">
<script>

function loading(event)
{
   $("#tablamaestra").load('data.htm', function(){
       $(this).sorttable();
       $(this).trigger("update");
       $(this).trigger("appendCache");
    });
};
$(function( ){
       $("#miboton").bind("click", loading);
});

</script>

<title>Ejemplo CSS</title>

</head>

<body>

<a id="miboton">Ver 2</a>
<br>
<div id="tablamaestra2">aqui</div>


</body>

</html>

masterpuppet · #7 (**permalink**) 22/02/2011, 08:21

Ajustalo a tu html, algo así:

Código Javascript:

Ver original...
function loading(event)
{ 
   $("#tablamaestra2").load('data.htm', function(){
        var tablamaestra = $('tablamaestra');
        tablamaestra.sorttable();
        tablamaestra.trigger("update");
        tablamaestra.trigger("appendCache");
     });
}
$(function( ){
    $("#miboton").bind("click", loading);
});

combuilder · #8 (**permalink**) 22/02/2011, 08:32

Cita:

Iniciado por masterpuppet

Ajustalo a tu html, algo así:

Código Javascript:

Ver original...
function loading(event)
{ 
   $("#tablamaestra2").load('data.htm', function(){
        var tablamaestra = $('tablamaestra');
        tablamaestra.sorttable();
        tablamaestra.trigger("update");
        tablamaestra.trigger("appendCache");
     });
}
$(function( ){
    $("#miboton").bind("click", loading);
});

Me da error en la linea: tablamaestra.sorttable();

Es decir que .. desde esa línea, no aplica nada más!

masterpuppet · #9 (**permalink**) 22/02/2011, 08:52

Estoy usando tu codigo tal cual lo pusiste, esa funcion existe en tablesorter ?, porque creo que deberia ser:

Código Javascript:

Ver originaltablamaestra.tablesorter();

tenes algun link a la version que estas utilizando ?

combuilder · #10 (**permalink**) 22/02/2011, 09:20

Escribeme un email a combuilder "arroba" gmail.com y te envio todo en un zip.