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!

Carlos Dk

Apasionado por la enseñanza y el SEO

8 comentarios en “Crear datatable con JQuery, usar un objeto table con la potencia de datatable

  • el 17 septiembre, 2014 a las 6:54 am
    Permalink

    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?

    Respuesta
    • el 17 septiembre, 2014 a las 7:02 am
      Permalink

      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

      Respuesta
  • el 18 septiembre, 2014 a las 1:25 am
    Permalink

    Verdad no seme habia ocurrido eso del scroll en css.

    Muchas gracias, aplicare el consejo!!

    Respuesta
  • el 22 junio, 2016 a las 1:59 pm
    Permalink

    Cuando intento agregar mas columnas a la tabla me tira el siguiente error
    TypeError: a.aoColumns[c] is undefined

    Respuesta
    • el 23 junio, 2016 a las 3:36 pm
      Permalink

      ten en cuenta que tanto en la parte del html como el json debe de tener ambos «espacios» reservados 😉

      Respuesta
  • el 23 junio, 2016 a las 5:44 pm
    Permalink

    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

    Leg
    Apellido y Nombre

    sssss
    101
    Dmitry
    dmitry@domain.com
    +98(765)432-10-98

    Gracias

    Respuesta
    • el 1 julio, 2016 a las 1:11 pm
      Permalink

      Qué son las sssss? posiblemente venga por ahí el problema, pero el error es por que no coinciden las columnas parece

      Respuesta

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.