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.