Responsive Tables - Creando tablas responsivas¶

Agregar Librerías a su módulo¶

Primero que todo, debemos cargar la librería a nuestro modulo para hacer uso de ella.

function __construct() {
...
$this->addHead(\Core\Html::link('templates/unificado/libreria/responsive-tables/tables.css'));
...
$this->addFoot(\Core\Html::scriptjs('templates/unificado/libreria/responsive-tables/tables.js'));
...
}

Hacer una tabla responsiva¶

Para hacer una tabla responsiva hay que añadir la clase responsive a la tabla

<table class='responsive'>
...
</table>

Manejo de carga de tablas via AJAX¶

Cuando se carga una tabla vía AJAX, aparte de declarar la clase responsive hay que indicarle al plugin que hemos cargado una tabla nueva
o podemos simular un “redraw” de la pagina para engañar al plugin y que remapee las tablas.

Una vez insertemos la tabla en nuestro html realizar lo siguiente en el callback de la funcion AJAX

callback = function(response) {
    ...
    splitTable($('.responsive'))
    ...
}

También podemos engañar al navegador disparando el evento "redraw" después de cargar la tabla

callback = function(response) {
    ...
    $(window).trigger('redraw');
    ...
}

Carga dinamica de campos en una tabla responsiva¶

Algoritmicamente lo que hace el plugin es transformar la tabla en elementos div modificables para dar el aspecto "scrollable",
imaginemos el siguiente escenario.

Tengo un formulario que en vez de mandar el contenido al servidor, lo guarda en memoria local hasta que ocurra un cierto
evento en el que se envía todo lo almacenado, y una tabla de resumen visible al usuario que le permite manipular el contenido almacenado
eliminando lo que ya no necesite.

Cada vez que agreguemos un elemento este se adjunta a la tabla de resumen tantas veces sea necesario.

Cuando estamos en una pagina normal no hay ningún problema ya que se agrega una fila dentro de la tabla y ya está.

Pero cuando esta está responsiva ya no estamos frente a una tabla, si no a una cantidad N de divs.

Se puede abordar este problema desde varios puntos de vista, pero lo mas simple de implementar sin alterar la lógica de adjuntar a la tabla
es hacer lo siguiente:

• Quitar el responsive de la tabla: Deshacemos el responsive con el metodo unsplitTable(elemento), donde elemento es el elemento responsive (JQuery)

unsplitTable($('.responsive'));

• Adjuntar la o las filas a la tabla
• Hacer responsive la tabla: Mediante uno de los métodos antes señalados regeneramos el responsive.
  

  $(window).trigger('redraw');