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!