Prueba

JQuery datatables
|Contenido |
|[ocultar] |
|1 Descargar |
|2 El HTML básico |
|3 Inicializar datatable |
|4 Estilo CSS en los datatables|
|5 Coger datos de un fichero |
|6 Actualizar la tabla con AJAX |

datatables es una extensión de jQuery que nos permite pintar tablas con paginado, búsqueda, ordenar por columnas, etc. En la misma página de datatables tienes ejemplos como este. Veamos aquí lo básico para empezar con datatables.
Descargar
NecesitamosjQuery y datatables. Si descargamos el zip de datatables, viene con una versión de jQuery y algo de CSS, por lo que con ese zip en principio tenemos todo lo necesario para empezar a trabajar. La otra opción es bajarse sólo el javascript de datatables, pero necesitaremos bajarnos por separado jQuery y hacernos algo de CSS.
Por ello, lo mejor para empezar y tener todo lo necesario, es bajarse el zip ydesempaquetarlo en algún sitio de nuestro gusto. De ese zip, una vez desempaquetado, nos interesan los directorios /media/js, /media/css, /media/images, que contienen respetivamente el javascript, los css y las imágenes para algunos botones de la tabla (siguiente, anterior, etc).
Copiamos estos tres directorios en el sitio donde vayamos a hacer nuestro tabla.html, de esta forma
./tabla.html./js/*.js
./css/*.css
./images/*

El HTML básico
Vamos con la tabla más sencilla de todas. Hacemos un HTML con un cualquiera. Es importante darle un id al tag
| |


y tiene que tener con la cabecera de forma que datatables sea capaz de identificar la cabecera de las columnas y para que identifique los datos. Puede ser algo como esto


columna 1columna 2columna3columna 4


unodostrescuatro
cincoseissieteocho
nuevediezoncedoce
trececatorcequincedieciseis



Inicializar datatable
En el HTML debemos incluir los javascript necesarios e inicializar nuestra tabla. para ello, entre los incluimos los javascript


Para inicializar la tabla, ponemos elsiguiente código javascript (entre los o al empezar el )

$(document).ready(function() {
$('#tabla').dataTable();
})

Visualizando la página en un navegador, debemos ver algo como lo siguiente
[pic]
Es muy "cutre", pero es porque nos falta el CSS, vamos a añadirlo

Estilo CSS en los datatables
Lo primero que podemos hacer para dar estilo esincluir el css que viene de ejemplo. Entre las cabeceras ponemos

con esto ya tenemos algo mejor

pero todavía nos falta un poco, hay que dar estilo a las cabeceras, botones y demás. Aquí es donde nos salimos de datatable, o mejor dicho, donde datatable "delega" en jQuery. Lo mejor para coger unos ficheros de estilo sin tener que hacerlos desde cero, es irse a la página ThemeRoller (Construir temaCSS para jQuery), que nos permite crear fácilmente estilos para jQuery y descargarlos para usarlos en nuestra página. Yo he hecho uno y me lo he bajado. Dentro de lo que viene en el zip, nos interesa el directorio css, que lleva dentro (en varios subdirectorios) los ficheros css y los iconos. Lo ponemos en algún lado de nuestra estructura de directorios y hacemos el enlace correspondiente


Nosfalta un último detalle, hay que decirle a datatables que ponga los class de CSS de jQuery en la tabla, para ello, añadimos un parámetro en la inicialización que hicimos de nuestra tabla

$(document).ready(function() {
$('#tabla').dataTable({
bJQueryUI : true
});
})

Con bJQueryUI:true le estamos indicando que queremos...