Exportar la información de las Datatables de jQuery a PDF, Excel, CSV y portapapeles

Sin duda, las Datatables de jQuery es un plugin de jQuery muy flexible que te ayuda a convertir tus tablas HTML en un diseño grid. Con este plugin podrás crear Datatables, las cuales, entre otras, poseen características la mar de útiles como paginación, búsqueda instantánea, exportación y ordenación multi-columna. En este tutorial, te mostraremos cómo exportar una datatable de jQuery a PDF, Excel, CSV y portapapeles utilizando PHP y MySQL.

Para ello, utilizaremos el plugin ExportButton para exportar la información de la Datatable a formato CSV, PDF, Excel y copiarlo al portapapeles. Ojo, esta funcionalidad únicamente funcionará en navegadores que soporten HTML5.

Antes que nada, incluiremos los plugin necesarios para crear las Datatables y para exportar la información.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/jq-2.1.4,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,af-2.0.0,b-1.0.3,b-colvis-1.0.3,b-html5-1.0.3,b-print-1.0.3,se-1.0.1/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/r/dt/jq-2.1.4,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,af-2.0.0,b-1.0.3,b-colvis-1.0.3,b-html5-1.0.3,b-print-1.0.3,se-1.0.1/datatables.min.js"></script>

Ahora, crearemos el HTML de nuestra Datatable.

<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>Empid</th>
<th>Name</th>
<th>Salary</th>
</tr>
</thead>
</table>

Aquí gestionaremos la funcionalidad del Datatable utilizando el plugin de jQuery estableciendo solicitudes a un fichero del lado del servidor (data.php) para obtener la información de la base de datos MySQL. Inicializaremos el botón Export añadiendo lBfrtip a un elemento DOM. También añadiremos y personalizaremos el botón Export utilizando un object json. En el array de buttons, tendremos las opciones copy, Excel, csv, pdf y print. El valor de dichos botones se mostrará debajo del botón Export.

$( document ).ready(function() {
$('#example').DataTable({
"processing": true,
"sAjaxSource":"data.php",
"pageLength": 5,
"dom": 'lBfrtip',
"buttons": [
{
extend: 'collection',
text: 'Export',
buttons: [
'copy',
'excel',
'csv',
'pdf',
'print'
]
}
]
});
});

Ahora en data.php, obtendremos la información de la base de datos MySQL y los devolveremos en formato JSON utilizando la función de PHP json_encode.

<?php
// initilize all variables
$params = $columns = $totalRecords = $data = array();
$params = $_REQUEST;
//define index of columns
$columns = array(
0 =>'id',
1 =>'employee_name',
2 => 'employee_salary'
);
$where = $sqlTot = $sqlRec = "";
// getting total number records from table without any search
$sql = "SELECT * FROM `employee` ";
$sqlTot .= $sql;
$sqlRec .= $sql;
$sqlRec .= " ORDER BY employee_name";
$queryTot = mysqli_query($conn, $sqlTot) or die("database error:". mysqli_error($conn));
$totalRecords = mysqli_num_rows($queryTot);
$queryRecords = mysqli_query($conn, $sqlRec) or die("error to fetch employees data");
// iterate on results row and create new index array of data
while( $row = mysqli_fetch_row($queryRecords) ) {
$data[] = $row;
}
$json_data = array(
"draw" => 1,
"recordsTotal" => intval( $totalRecords ),
"recordsFiltered" => intval($totalRecords),
"data" => $data
);
// send data as json format
echo json_encode($json_data);
?>