jQuery | Paginar resultados (vía AJAX) en tablas y/o parsear JSON

[jam1138]

Estoy realizando una consulta al servidor mediante un formulario y mi idea es presentar los resultados en una tabla por resultado (información relacionada), pero como son varios resultados la idea es paginar esas tablas.

Mi duda, en resumen, es cómo poder hacerlo .

Actualmente el formulario se está enviando en segundo plano (AJAX) y ahora estoy regresando la tabla como tal, parseando por cada resultado un código como este:

Código html:

<div id="idResult-numeroGeneradoDinamicamente">
<table class="tableResult">
  <caption>Viendo resultado XX de YYY</caption>
  <thead>
    <th> </th>
    <th>Nombre(s)</th>
    <th>Apellido paterno</th>
    <th>Apellido materno</th>
  </thead>
  
  <tfoot>
    <tr>
      <td colspan="4">
        <button type="button">Seleccionar</button>
      </td>
    </tr>
  </tfoot>
  
  <tbody>
    <tr>
      <th>Persona1: </th>
      <td>XXXXXXXXXXX</td>
      <td>XXXXXXXXXXX</td>
      <td>XXXXXXXXXXX</td>
    </tr>
    <tr>
      <th>Persona 2: </th>
      <td>XXXXXXXXXXX</td>
      <td>XXXXXXXXXXX</td>
      <td>XXXXXXXXXXX</td>
    </tr>
    <tr>
      <th>Persona 3: </th>
      <td>XXXXXXXXXXX</td>
      <td>XXXXXXXXXXX</td>
      <td>XXXXXXXXXXX</td>
    </tr>
  </tbody>
</table>
</div>
 

Que visualmente genera algo como esto:



Con esto, estoy teniendo problemas para paginar dichas tablas. Primero porque me he dado cuenta que así, regresando HTML, los eventos previamente declarados no son asociados con el "nuevo código"; esto es, que si antes declaré algo como $('.tableResult').click( // etc ); y le doy click a alguna tabla del resultado (que corresponde con la clase), el evento no es lanzado.

He ahí el primer planteamiento: ¿cómo "solucionar esto"?; ¿regresar igual código javascript y 'cargarlo' --con eval()--?, ¿algo como 'recargar' una función previamente declarada? ... no sé, ni idea.

Por otra parte, esto lo tengo así por tomar código ya hecho, sin embargo, ¿qué tan mejor sería la opción de regresar un arreglo de objetos JSON para parsearlos y generar el contenido dinámicamente?; más importante ¿cómo hacerlo?

Estoy utilizando Form Plugin, puedo recuperar mi resultado sin problema pero no sé como generar las tablas y tratarlas para su paginación.

El código, por si fuese necesario, es:

Código javascript:

var options = { 
                target : '#results',
                beforeSubmit: function() { 
                     // Supongo esto igual se puede hacer de una  manera más elegante.
                     $('#results').html('<div id="indicadorBuscando"><img alt="buscando..." src="img/cargando.gif"></div>');
                },
                success: mostrarResultados, // callback a función mostrarResultados
                dataType : 'json'
            }; 
 
// Envio el formulario, recibo respuesta y es pasada a la función mostrarResultados
 
function mostrarResultados(data) {
    // Y data es el resultado en formato JSON, pero aquí no sé como generar las tablas
}
 

Respecto a esta última manera, he encontrado un código pero que honestamente no entiendo bien, como en la declaración de esta variable:

Código javascript:

var $table = $('<table/>');
 

¿esta creando un nuevo elemento ahí? ... No había visto antes algo como $variable .

Como siempre, cualquier comentario, sugerencia, enlace, ejemplo es agradecido de antemano.

[TresPuntoDos]

Iniciado por jam1138

He ahí el primer planteamiento: ¿cómo "solucionar esto"?; ¿regresar igual código javascript y 'cargarlo' --con eval()--?, ¿algo como 'recargar' una función previamente declarada? ... no sé, ni idea.

Aqui tu solucion es facil, en el callback de la llamada, es decir, en tu funcion mostrarResultados, cuando hayas creado todo el html nuevo en tu pagina puedes hacer un $("tabla").click(function);

Iniciado por jam1138

Por otra parte, esto lo tengo así por tomar código ya hecho, sin embargo, ¿qué tan mejor sería la opción de regresar un arreglo de objetos JSON para parsearlos y generar el contenido dinámicamente?; más importante ¿cómo hacerlo?

Hay una ley que yo siempre aplico, si algo funciona, no lo toques
Se podria hacer pero te llevara tiempo y muchos quebraderos de cabeza, primero para que tu servidor devuelva bien los datos y luego para que tu los parsees bien

Iniciado por jam1138

Estoy utilizando Form Plugin, puedo recuperar mi resultado sin problema pero no sé como generar las tablas y tratarlas para su paginación.

Si estas devolviendo HTML no uses dataType : 'json'

Iniciado por jam1138

Código javascript:

var $table = $('<table/>');
 

¿esta creando un nuevo elemento ahí? ... No había visto antes algo como $variable .

Efectivamente, eso crea una tabla nueva en el html

[jam1138]

Iniciado por TresPuntoDos

Aqui tu solucion es facil, en el callback de la llamada, es decir, en tu funcion mostrarResultados, cuando hayas creado todo el html nuevo en tu pagina puedes hacer un $("tabla").click(function);

Gracias; no se me había ocurrido . Sí, fue fácil y con eso soluciono mi problema .

Iniciado por TresPuntoDos

Hay una ley que yo siempre aplico, si algo funciona, no lo toques

Igual lo aplico, pero no como ley. Soy más curioso y de buscar como mejorar las cosas siempre que se pueda

Iniciado por TresPuntoDos

Si estas devolviendo HTML no uses dataType : 'json'

Eso lo puso porque, en ese caso, sí estoy devolviendo el tipo de dato JSON. Realmente "armarlo" no es nada complicado, es más sencillo que parsear y crear el HTML ... y veo que al tratar de armar las tablas solo es de acceder a sus atributos una y otra vez ... pero por ahora no lo aplico, prefiero gastar tiempo de carga que procesador del cliente.

Iniciado por TresPuntoDos

Efectivamente, eso crea una tabla nueva en el html

¿Algún enlace a la documentación?, ¿esto es particular de jQuery o es algo de JavaScript --si, no soy nada experimentado con lo que sucede en el lado del cliente :-/--.

Gracias por tu ayuda .

[TresPuntoDos]

En la pagina http://docs.jquery.com esta toda la documentacion, hay cosas que no vienen pero tienen un foro donde hacer preguntas y donde se aprende mucho