El hecho de exportar datos es una característica muy común en casi todas las webs dinámicas para guardar información en un fichero local y así utilizarla para tus menesteres. Por regla general, solemos exportar información a un fichero utilizando lenguajes del lado del servidor, lo cual es un poco tedioso. Si no quieres utilizar lenguajes del lado del servidor para la función de exportar puedes utilizar lenguajes del lado del cliente, como jQuery. Utilizar este tipo de lenguajes para exportar información es mucho más sencillo y rápido. En este tutorial, te mostraremos cómo exportar información con jQuery. Exportaremos la información de una tabla HTML a Excel, CSV y texto mediante jQuery.
Sin más dilación, esta será la estructura de archivos de nuestro tutorial:
- index.php
- custom_export.js
Crear la tabla en la base de datos MySQL
Como mostraremos registros dinámicamente en nuestra tabla HTML de nuestra base de datos MySQL, lo primero que tenemos que crear es una tabla, a la cual llamaremos developers, e insertar unos cuantos registros.
CREATE TABLE `developers` ( `id` int(11) NOT NULL, `name` varchar(255) NOT NULL, `skills` varchar(255) NOT NULL, `address` varchar(255) NOT NULL, `gender` varchar(255) NOT NULL, `designation` varchar(255) NOT NULL, `age` int(11) NOT NULL, `image` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Incluir jQuery y el plugin tableExport
Para gestionar la exportación de la información de nuestra tabla HTML utilizaremos el plugin de jQuery tableExport, por lo que tendremos que incluir jQuery y el propio plugin en el archivo index.php.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="tableExport/tableExport.js"></script> <script type="text/javascript" src="tableExport/jquery.base64.js"></script> <script src="js/custom_export.js"></script>
Crear tabla HTML con datos de la base de datos
Ahora crearemos la tabla HTML en index.php con registros de nuestra tabla developers para después exportarlos en distintos formatos. Diseñaremos también el desplegable con la lista de opciones para exportar la información a distintos tipos de ficheros.
<table id="data_table" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Designation</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<?php
$sql_query = "SELECT name, gender, address, designation, age FROM developers LIMIT 10";
$resultset = mysqli_query($conn, $sql_query) or die("database error:". mysqli_error($conn));
while( $developer = mysqli_fetch_assoc($resultset) ) {
?>
<tr>
<td><?php echo $developer ['name']; ?></td>
<td><?php echo $developer ['gender']; ?></td>
<td><?php echo $developer ['age']; ?></td>
<td><?php echo $developer ['designation']; ?></td>
<td><?php echo $developer ['address']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
Implementar la exportación de información
Finalmente, en el fichero custom_export.js gestionaremos la función para exportar la tabla HTML a CSV, Excel y texto utilizando el plugin tableExport. Llamaremos a la función .tableExport() del plugin de jQuery cuando se haga clic para exportar la información.
$( document ).ready(function() {
$(".export").click(function() {
var export_type = $(this).data('export-type');
$('#data_table').tableExport({
type : export_type,
escape : 'false',
ignoreColumn: []
});
});
});