Crear datatable con JQuery, usar un objeto table con la potencia de datatable
Bienvenid@s a VerTutoriales.com en esta ocasión vamos a ver como convertir una tabla en html en una datatable con todas las ventajas que tiene. Para ello vamos a utilizar la librería JQuery para implementarlo, además de las librerías tales para implementar la datatable a la tabla en html.
En este ejemplo solo vamos a crear una tabla y vamos a añadirle un contenido a mano, vamos a configurar las librerías y vamos a ver como aplicar la librería de datatable para asignarselo a un objeto table de html. En un siguiente ejemplo implementaremos también nuestro datatable con una llamada Ajax para traernos un array que montaremos al vuelo con PHP, una manera muy elegante de cargar la información en nuestro datatable.
Sin más, lo primero que necesitamos es la librería, para ello vamos a datatables.net y descargamos la versión que tengan en ese momento.
Creamos un nuevo documento html y añadimos las siguientes lineas:
<link rel=»stylesheet» type=»text/css» href=»./media/css/jquery.dataTables.css»>
<script type=»text/javascript» language=»javascript» src=»./media/js/jquery.js»></script>
<script type=»text/javascript» language=»javascript» src=»./media/js/jquery.dataTables.js»></script>
Estas lineas contienen, el estilo, la librería jquery y la jquery.datatables que es la encargada del objeto table para transformarlo en el potente herramienta.
Por otro lado, hay que crear una tabla con datos:
<table id=»example» class=»display» cellspacing=»0″ width=»100%»>
<thead>
<tr>
<th>idImagen</th>
<th>idUsuario</th>
<th>nombre</th>
<th>extension</th>
<th>escala</th>
<th>categoria</th>
</tr>
</thead>
<tbody><tr>
<th>1</th>
<th>2</th>
<th>nombre imagen</th>
<th>jpg</th>
<th>1:10</th>
<th>mapa</th>
</tr>
</tbody>
</table>
Para terminar, solo nos faltaría añadir un script más que es para indicar a nuestro navegador que cuando cargue la página, el objeto de tipo tabla llamado «example» sea de tipo datatable:
<script>
$(document).ready(function() {
$(‘#example’).dataTable( );</script>
Así de sencillo, de todas maneras, os recomiendo que veáis el vídeo, ya que la explicación es más clara y podéis ver los resultados, son apenas 10 min de vídeo paso a paso, desde que descargo la librería, crear el documento e incluso solucionar algún bug por descuido a la hora de escribir el código que también os puede ocurrir de forma más que normal por descuido.
Sin más, espero que os sirva, si es así agradezco que compartáis, que le deis me gusta para seguir más videotutoriales desde facebook o os suscribáis al canal de youtube de vertutoriales.com
Un saludo!
Hola, muy buen tuto tengo ya estoy suscripto a tu canal.
te quiero pedir un favor, tengo muchas columnas como podria hacer para que entre todo en forma horizontal(asi como en el video) en un div, o quizas se podria hacer en forma vertical? asi:
alguna recomendacion.
N° Documento
Numero Socio
Nombre
Apellido
Ocupacion
E-mail
Telefono
Celular
Calle
Altura
Piso
Dpto
Localidad
Provincia
CP
Fecha Alta
Vencimiento Pase
gracias por los tutos?
Buenos Luis,
Para meter tal cantidad de datos en un mismo datatable, lo único que se me ocurre es que utilizando CSS le pongas scroll a esa capa para que pueda desplazarse en horizontal ya que tal cantidad de datos en una misma pantalla lo veo complicado a no ser que lo pongas al 100% de width.
Con respecto a poner los campos en vertical, entendiendo que la información en horizontal, creo que quedaría raro para la usabilidad, aún así, desconozco si con un datatable se podría configurar de manera que la información vaya en horizontal. Sí que se podría programar, pero personalmente no lo recomendaría.
Espero que te ayude, estoy por aquí para cualquier consulta 😉
Am! y gracias por suscribirte al canal de youtube!, dejo por aquí el enlace 😉
https://www.youtube.com/vertutoriales
Verdad no seme habia ocurrido eso del scroll en css.
Muchas gracias, aplicare el consejo!!
De nada, para cualquier duda estoy para lo que necesites 😉
Cuando intento agregar mas columnas a la tabla me tira el siguiente error
TypeError: a.aoColumns[c] is undefined
ten en cuenta que tanto en la parte del html como el json debe de tener ambos «espacios» reservados 😉
Gracias por responder Carlos, no entiendo donde tengo que configurar la cantidad de columnas que quiero poner en mu tabla, aparte de la libreria jquery solo tengo el html de la tabla, cuando agrego mas de 5 columnas me salta ese error.
El codigo html
sssss
Id
N°
Leg
Apellido y Nombre
sssss
101
Dmitry
dmitry@domain.com
+98(765)432-10-98
Gracias
Qué son las sssss? posiblemente venga por ahí el problema, pero el error es por que no coinciden las columnas parece