🔥 Full Working Example:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo DataTable con Exportaciones</title>
<!-- Bootstrap 4.1.1 CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.bootstrap4.min.css">
<!-- FontAwesome (for button icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.flexcontent {
display: flex;
justify-content: space-between;
align-items: center;
}
.btn-app {
margin: 5px;
min-width: 100px;
}
</style>
</head>
<body>
<div class="container mt-5">
<h2 class="mb-4">Ejemplo de Tabla con Exportaciones</h2>
<table id="ejemplo" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>Pérez</td>
</tr>
<tr>
<td>Ana</td>
<td>García</td>
</tr>
<tr>
<td>Mario</td>
<td>Ramírez</td>
</tr>
</tbody>
</table>
</div>
<!-- Libraries JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!-- DataTables and Buttons -->
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>
<!-- Initialize DataTable -->
<script>
var idioma = {
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sSearch": "Buscar:",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
},
"buttons": {
"copyTitle": 'Información copiada',
"copySuccess": {
"_": '%d filas copiadas al portapapeles',
"1": '1 fila copiada al portapapeles'
},
"pageLength": {
"_": "Mostrar %d filas",
"-1": "Mostrar Todo"
}
}
};
$(document).ready(function() {
var table = $('#ejemplo').DataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
"language": idioma,
"lengthMenu": [[5, 10, 20, -1], [5, 10, 20, "Mostrar Todo"]],
dom: 'Bfrt<"col-md-6 inline"i><"col-md-6 inline"p>',
buttons: {
dom: {
container: {
tag: 'div',
className: 'flexcontent'
},
buttonLiner: {
tag: null
}
},
buttons: [
{
extend: 'copyHtml5',
text: '<i class="fa fa-clipboard"></i> Copiar',
title: 'Título de tabla copiada',
titleAttr: 'Copiar',
className: 'btn btn-app export barras',
exportOptions: {
columns: [0, 1]
}
},
{
extend: 'pdfHtml5',
text: '<i class="fa fa-file-pdf-o"></i> PDF',
title: 'Título de tabla en PDF',
titleAttr: 'PDF',
className: 'btn btn-app export pdf',
exportOptions: {
columns: [0, 1]
},
customize: function(doc) {
doc.styles.title = {
color: '#4c8aa0',
fontSize: '30',
alignment: 'center'
};
doc.styles.tableHeader = {
fillColor: '#4c8aa0',
color: 'white',
alignment: 'center'
};
doc.content[1].margin = [100, 0, 100, 0];
}
},
{
extend: 'excelHtml5',
text: '<i class="fa fa-file-excel-o"></i> Excel',
title: 'Título de tabla en Excel',
titleAttr: 'Excel',
className: 'btn btn-app export excel',
exportOptions: {
columns: [0, 1]
}
},
{
extend: 'csvHtml5',
text: '<i class="fa fa-file-text-o"></i> CSV',
title: 'Título de tabla en CSV',
titleAttr: 'CSV',
className: 'btn btn-app export csv',
exportOptions: {
columns: [0, 1]
}
},
{
extend: 'print',
text: '<i class="fa fa-print"></i> Imprimir',
title: 'Título de tabla en impresión',
titleAttr: 'Imprimir',
className: 'btn btn-app export imprimir',
exportOptions: {
columns: [0, 1]
}
},
{
extend: 'pageLength',
titleAttr: 'Registros a mostrar',
className: 'selectTable'
}
]
}
});
});
</script>
</body>
</html>
✅ This version is ready to copy and paste into a .html file and run!
✅ Full Bootstrap 4, DataTables, Export Buttons, and Spanish translations.
