[JQuery] Instalar y Usar el Plugin DataTables con Bootstrap 3

El plugin datatables nos ayuda a crear tablas interactivas con controles de paginacion, ordenacion de columnas, busqueda y otras funciones.

El plugin datatables nos ayuda mucho a darle un mejor sentido y vista a nuestras tablas y ayuda a los usuarios a interactuar con los datos de una mejor manera.

Para descargar el plugin debemos ir a la pagina oficial https://datatables.net/ en la opción de descargar o Download.

Es necesario saber que opción vamos a utilizar, ya que existen versiones para jquery, bootstrap 3, bootstrap 4, zurb fundation, semantic ui, entre otros.

El que vamos a usar es bootstrap 3, pero al seleccionar bootstrap 3 se descargaran 2 archivos: datatables.min.css y datatables.min.js, entonces los archivos se llaman asi, sea la opción que seleccionamos, lo que cambia entre las diferentes versiones es la apariencia.

Instalando el plugin DataTables

Para instalar el datatables necesitamos los 2 archivos descargados, el jquery y los archivos de bootstrap.

[code language=”html”] <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="datatables/datatables.min.css">
<script type="text/javascript" src="datatables/datatables.min.js" ></script>
[/code]

Con estas lineas agregamos al proyecto los archivos css y js necesarios.

Lo siguiente es crear una tabla valida, con un table header, sin el header no funcionara.

[code language=”html”]

<table class="table table-bordered datatable">
<thead>
<th>Nombre</th>
<th>Email</th>
<th>Telefono</th>
<th>Estado</th>
<th></th>
</thead>
<tr>
<td>Agustin Ramos</td>
<td>evilnapsis@gmail.com</td>
<td>123456789</td>
<td>Pendiente</td>
<td></td>
</tr>
</table>

[/code]

Debemos agregar una clase o un id a la tabla para el siguiente paso, donde llamaremos a la funcion datatable.

Para llamar la funcion datatable usaremos un script de javascript.

[code language=”javascript”]

$(document).ready(function(){
$(".datatable").DataTable();
})

[/code]

Y listo. Ya podemos disfrutar de este plugin genial

Resultado

El resultado de nuestra tabla con Datatables.

Descargar

A continuación puedes descargar el ejemplo con todos los archivos.

Link: https://drive.google.com/file/d/1bcphKm7HhOwbi32oToHVtiT0mKPQFqdr/view?usp=sharing

🙂