Bipunto..

lunes junio 29, 2009

Script para ordenar una tabla html print friendly (2/2)

Bueno, pues lo prometido es deuda. Vamos a hacer print friendly el soberbio script TinyTable Sorter de Michael Leigeber.

Las técnicas para hacer que una página web sea print friendly, término que se podría traducir por página web amigable para la impresión, aplicadas en el desarrollo de aplicaciones web, nos dan diferentes beneficios. El más inmediato es el ahorro de tiempo al no tener que confeccionar listados para imprimir al poder reutilizar las pantallas para este fin.

Empecemos ya con la transformación. Lo primero que tenemos que hacer es tener una hoja de estilos especifica para el media print, es decir, para cuando se use la impresora en vez de la pantalla, o estemos en modo "vista previa de impresión". El fichero para ese estilo lo llamaremos print.css, y para empezar le pondremos el selector de clase siguiente:

.rowhidden { display: table-row }

cuyo efecto consiste en hacer que el elemento con dicha clase se visualize con la propiedad CSS display en modo table-row. Este valor, a pesar de ser el estándar de la W3C.org para mostrar una fila de una tabla, no es válido para los raritos IE 6-7, el IE8 por fin, sí soporta la propiedades table-row.

En segundo lugar añadiremos este mismo selector de clase al final de la css utilizada por defecto y que se llama style.css, pero con estos otros valores:

.rowhidden { display: none } 

que lo que hará es ocultar los elementos con dicha clase.

En tercer lugar la css para la impresora la incluiremos en nuestra página después de la css utilizada por defecto, para que tenga mayor prioridad. Además indicaremos al navegador que dicha hoja de estilos sólo es aplicable para la impresora. El código quedará así:

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="print.css" type="text/css" media="print"/> 

Ahora, antes de aplicar los dos cambios al código javascript, una pequeña explicación de cómo funciona el script, con lo que se verá porque no actúa correctamente con la impresora.

En el momento de mostrar la tabla, el script mira si se ha seleccionado la paginación y el tamaño en filas de esta. Entonces a las filas que no se han de mostrar les asigna dinámicamente la propiedad display:none, mientras que a las que hay que mostrar le resetea el valor de display (esto es un hack crossbrowser). Evidentemente el comportamiento en la impresora es el mismo que en la pantalla, y sólo se mostrarán las filas de la paginación, ocultándose el resto.

Para hacer que el Tiny Table se comporte print-friendly, lo que haremos es que a la filas a ocultar les asignaremos la clase "rowhidden" que en modo pantalla tendrá el mismo comportamiento que antes,  permanercerá oculta, pero  que en modo impresora mostrará las filas. Y para las filas a mostrar le quitaremos esta clase con lo que se mostrarán siempre. Con estos dos cambios emularemos el comportamiento que antes se hacía con la propiedad display.

Esto se implementa con dos cambios en dos lineas, en los siguientes métodos del fichero script.js:

sorter.prototype.wk=function(y){
    var t=ge(this.e), x=t.h.cells[y], i=0;
    for(i;i<this.l;i++){
      t.a[i].o=i; var v=t.r[i].cells[y]; t.r[i].className=i%2==0?this.even:this.odd;
[...]

sorter.prototype.page=function(s){
    var t=ge(this.e), i=0, l=s+parseInt(this.pagesize);
    if(this.currentid&&this.limitid){T$(this.currentid).innerHTML=this.g}
    for(i;i<this.l;i++){t.r[i].className=(i%2==0?this.even:this.odd)+(i>=s&&i<l?'':' rowhidden')}
};

Estos cambios habrá que traspasarlos al código condensado (packed.js) si se desea utilizar dicho script que ocupa algo menos espacio, o alternativamente comprimir el javascript normal.

Finalmente podemos tunear la apariencia de la tabla específicamente para la impresión especificando los atributos pertinentes en la hoja de estilos de la impresora. Por ejemplo podemos hacer que no se muestren los controles de navegación por las páginas, quitar las imagenes del fondo y ajustar los colores, con los selectores:

#controls { display: none }
body { background:#fff none; color:#000 }
.sortable th { background: none; color:#000; border-color:#000 }
.sortable .desc, .sortable .asc { background:none }
.sortable .head h3 { background:none }
.sortable td { border-bottom:1px solid #000; border-right:1px solid #000 }

Para acabar, hay que aplicar un hack css para hacer display:block para los navegadores IE 6-7, que se consigue duplicando dicho selector antes del estándar. A pesar de esto, IE 7 no repite las cabeceras de las columnas para las otras páginas.

Espero que os sea de utilidad..