El plugin datatables nos ayuda a crear tablas interactivas con controles de paginacion, ordenacion de columnas, busqueda y otras funciones.
💡 ¿Quieres aprender más? Este artículo es parte de nuestra Recopilación de Plugins JavaScript y jQuery → donde encontrarás más de 20 tutoriales gratuitos esperándote para llevar tus habilidades al siguiente nivel.
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.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>DataTables con Bootstrap 3 - evilnapsis</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="datatables/datatables.min.css">
</head>
<body>
<div class="container" style="margin-top: 50px;">
<h2>Listado de Contactos</h2>
<p>Ejemplo de tabla dinámica con búsqueda y paginación.</p>
<table class="table table-bordered datatable">
<thead>
<tr>
<th>Nombre</th>
<th>Email</th>
<th>Teléfono</th>
<th>Estado</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr>
<td>Agustin Ramos</td>
<td>evilnapsis@gmail.com</td>
<td>123456789</td>
<td><span class="label label-warning">Pendiente</span></td>
<td>
<button class="btn btn-xs btn-primary">Editar</button>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="datatables/datatables.min.js"></script>
<script type="text/javascript">
// Esperamos a que el documento esté completamente cargado
$(document).ready(function(){
// Inicializamos DataTables usando la clase que asignamos a la tabla
$(".datatable").DataTable({
// Opcional: Configuración para cambiar el idioma a español
"language": {
"lengthMenu": "Mostrar _MENU_ registros por página",
"zeroRecords": "No se encontraron resultados",
"info": "Mostrando página _PAGE_ de _PAGES_",
"infoEmpty": "No hay registros disponibles",
"infoFiltered": "(filtrado de _MAX_ registros totales)",
"search": "Buscar:",
"paginate": {
"first": "Primero",
"last": "Último",
"next": "Siguiente",
"previous": "Anterior"
}
}
});
});
</script>
</body>
</html>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¿Necesitas un software de ventas listo para producción?
Inventio Max es la solución profesional con soporte para múltiples almacenes, reportes avanzados y gestión de usuarios.Ver Inventio Max – Sistema de Inventario y Ventas Profesional →
Related
Gracias, me sirven mucho tus tutoriales.
Saludoa cordiales
De nada victor, estamos para ayudar!