Exportar Datatables a Excel, CSV, PDF, Imprimir con PHP

Exportar Datatables a Excel, CSV, PDF, Imprimir con PHP MySQL. En este tutorial explicaremos la funcionalidad de exportación con Datatable usando PHP, MySQL y AJAX respectivamente. La opción de «Exportar datos» hace que la aplicación web sea fácil de usar y ayuda al usuario a mantener los datos de la lista de manera dinámica.

Crearemos un sencillo script y con pasos sencillos para crear una demostración en vivo acerca de la funcionalidad de exportación con Datatable. Este es un ejemplo muy simple, puede simplemente configurarlo de acuerdo a sus necesidades.

Exportar Datatables a Excel: ¿Cómo funciona la opción Exportar Datatables a Excel?

Vamos a agregar la funcionalidad de exportación en la tabla de datos usando varios botones de exportación. Puede exportar datos en extensión: CSV, PDF, Excel, Imprimir, además de copiar los datos de la tabla en el portapapeles. Sin embargo, hay que tener en cuenta que estas funciones solo funcionarán en el navegador compatible con HTML5.

Haciendo uso de botones HTML5 lograremos exportar la información en extensiones de programas mencionados.

CRUD PHP usando PDO: Ejemplo completo

Estructura de archivos: Exportar Datatables a Excel

Características de la funcionalidad de exportar Datatables a Excel

Generalmente DataTables no posee la opción de exportar, pero en este artículo le agregaremos esa opción y nos permitirá realizar lo siguiente:

• Cargar datos de una sola vez en la tabla
• Guardar y exportar  datos de Datatable en Excel (XLSX)
• Exportar y guardar datos de Datatable en CSV
• Se puede exportar y guardar datos de Datatable en PDF
• Puede copiar datos de tabla de datos en el portapapeles
• Además, se puede imprimir los datos de la tabla de datos y mostrar una vista de impresión

Paso a paso: Exportar Datatables a Excel, CSV, PDF, Imprimir con PHP MySQL

A continuación, veremos paso a paso como configurar la opción exportar en varias extensiones de archivos.

a) Paso 1: Primero, Crear base de datos

Para que el ejemplo sea dinámico necesitamos crear una base de datos MySQL llamada «php_personal«, con la siguiente tabla que tendrá como nombre «personal«. Veamos el ejemplo.

CREATE TABLE `personal` (
`id` int(11) NOT NULL COMMENT 'primary key',
`name` varchar(255) CHARACTER SET latin1 NOT NULL COMMENT 'Employee Name',
`last_name` varchar(100) CHARACTER SET latin1 DEFAULT NULL,
`email` varchar(255) CHARACTER SET latin1 NOT NULL COMMENT 'Email Address',
`contact_no` varchar(16) CHARACTER SET latin1 DEFAULT NULL,
`address` text CHARACTER SET latin1,
`salary` float(10,2) NOT NULL COMMENT 'employee salary'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='datatable demo table';

INSERT INTO `personal` (`id`, `name`, `last_name`, `email`, `contact_no`, `address`, `salary`) VALUES
(1, 'Ashton', 'Cox', 'cox@gmail.com', '9000000001', 'Tokyo', 300001.00),
(2, 'Bradley', 'Greer', 'greer@gmail.com', '9000000002', 'Landon', 200001.00),
(3, 'Brenden', 'Wagner', 'wagner@gmail.com', '9000000003', 'New York', 500001.00),
(4, 'Brielle', 'Williamson', 'williamson@gmail.com', '9000000004', 'Cape Town', 600001.00),
(5, 'Caesar', 'Vance', 'vance@gmail.com', '9000000005', 'Sydney', 500002.00),
(6, 'Cedric', 'Kelly', 'kelly@gmail.com', '9000000006', 'Wellington', 600003.00),
(7, 'Prescott', 'Bartlett', 'Bartlett@gmail.com', '9000000007', 'Washington DC', 500002.00),
(8, 'Haley', 'Kennedy', 'Kennedy@gmail.com', '9000000013', 'Amsterdam', 678003.00),
(9, 'Charde', 'Marshall', 'marshall@gmail.com', '9000000008', 'Madrid', 509002.00),
(10, 'Jaeeme', 'Khan', 'khan@gmail.com', '9000000014', 'Delhi', 542003.00),
(11, 'Bunty', 'Bably', 'bably@gmail.com', '9000000009', 'Ottawa', 657002.00),
(12, 'Hermione', 'Butler', 'Butler@gmail.com', '9000000015', 'Edinburgh', 987003.00),
(13, 'Sonia', 'Khan', 'sonia@gmail.com', '9000000010', 'Oslo', 345002.00),
(14, 'Herrod', 'Chandler', 'Chandler@gmail.com', '9000000016', 'Abu Dhabi', 603003.00),
(15, 'Roney', 'Rockey', 'rockey@gmail.com', '9000000011', 'Berlin', 321002.00),
(16, 'Howard', 'Hatfield', 'Hatfield@gmail.com', '9000000017', 'Ankara', 123003.00),
(17, 'Gloria', 'Little', 'little@gmail.com', '9000000012', 'Rome', 920002.00),
(18, 'Jackson', 'Bradshaw', 'Bradshaw@gmail.com', '9000000018', 'Lisbon', 690003.00),
(19, 'Quinn', 'Flynn', 'Quinn@gmail.com', '9000000019', 'Antananarivo', 700003.00),
(20, 'Tatyana', 'Fitzpatrick', 'Fitzpatrick@gmail.com', '9000000020', 'Manila', 600001.00),
(21, 'Thor', 'Walton', 'Thor@gmail.com', '9000000021', 'Santiago', 304001.00);

ALTER TABLE `personal`
ADD PRIMARY KEY (`id`);
ALTER TABLE `personal`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'primary key', AUTO_INCREMENT=22;
COMMIT;

b) Paso 2: Configuración de la base de datos «DBConnection.php»

El siguiente script se utiliza para conectar la base de datos mediante PHP usando la clase llamada «DBConnection«. Además, está usando PDO la conexión recomendada por seguridad y estabilidad.

<?php
include "constants.php";
// Parametros de conexion
class DBConnection {
protected $host = DB_SERVER;
protected $dbname = DB_DATABASE;
protected $user = DB_USERNAME;
protected $pass = DB_PASSWORD;
protected $_db;

function __construct() {
try {
$this->_db = new PDO("mysql:host=$this->host;dbname=$this->dbname", $this->user, $this->pass);
}
catch (PDOException $e) {
echo $e->getMessage();
}
}

// Conexión de retorno
function returnConnection() {
return $this->_db;
}

// Cerramos la conexion
public function closeConnection() {
$this->_db = null;
}
}

c) Paso 3: Crear clase «Search»

Crea un archivo como Search.php. Para las búsquedas globales de la base de datos.

<?php
require_once(dirname(__FILE__)."/DBConnection.php");
class Search
{
protected $db;
public function __construct() {
$this->db = new DBConnection();
$this->db = $this->db->returnConnection();
}
// get Blog Info function
public function getBlogInfo() {
$query = $this->db->prepare("SELECT name, last_name, email, contact_no, address, salary FROM personal");
$query->execute();

$result = $query->fetchAll();
return $result;
} 
}

d) Paso 4: Obtener datos de la base de datos MySQL

Para trabajar con datatables necesitamos información de la base de datos y que sean devueltas como JSON a través de la función PHP json_encode con opciones de plugin Datatable.

Crearemos un archivo llamado «data.php» que será el encargado de realizar dicha operación.

<?php 
function __autoload($class) {
include "include/$class.php";
}
$srch = new Search();
$blogInfo = $srch->getBlogInfo();
$count = count($blogInfo);

$data = array(
'draw'=>1, 
'recordsTotal'=>intval($count), 
'recordsFiltered'=>intval($count), 
'data'=>$blogInfo,
);
//send data as json format
echo json_encode($data);
?>

e) Paso 5: Incluiremos archivos de plugin Datatable

Datatables necesita archivos de JavaScript y jQuery para funcionar y estos ficheros nos permitirán exportar información.
Hemos definido la tabla HTML para la inicialización jQuery Datatable plugin en esta página basado en id selector: «#render-data«.

Hemos inicializado “export Button” agregando ‘lBfrtip‘ en el elemento DOM. También logramos agregar y personalizar el botón de exportación usando el botón json objeto aquí. En «botones» hemos pasado excel, csv, pdf, opciones de impresión y copia.

Veamos los archivos externos necesarios en Datatables.

<!-- Bootstrap core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.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.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#render-data').DataTable({
rowReorder: {
selector: 'td:nth-child(2)'
},
responsive: true,
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"
},
"paging": true,
"processing": true,
'serverMethod': 'post',
"ajax": "data.php",
dom: 'lBfrtip',
buttons: [
'excel', 'csv', 'pdf', 'print', 'copy',
],
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );

</script>

f) Paso 6: Crear archivo «index.php»

Este es el último paso y será para crear un archivo PHP llamado index.php y será el encargado de llamar a la interfaz gráfica mediante la función include. Además será en encargado de mostrar la tabla con información de MySQL.

<?php
include('templates/header.php');
?>

<section class="showcase">
<div class="container">
<div class="row padall">
<div class="col-lg-12" style="padding-bottom:10px; padding-top:10px;">
<h3>Exportar a Excel, CSV, PDF, Print Datatables con PHP MySQL</h3>
</div>
</div>
<div class="row padall border-bottom">
<div class="col-lg-12">
<div class="table-responsive-sm">
<table id="render-data" class="table display nowrap" style="width:100%">
<thead>
<tr>
<th>Nombres</th>
<th>Apellidos</th>
<th>Email</th>
<th>Movil</th>
<th>Direccion</th>
<th>Salario</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Nombres</th>
<th>Apellidos</th>
<th>Email</th>
<th>Movil</th>
<th>Direccion</th>
<th>Salario</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<?php
include('templates/footer.php');
?>

CONCLUSIÓN: Exportar a Excel, CSV, PDF, Imprimir Datatables

Hoy en día prima la velocidad con que se dispone de la información y tener las herramientas básicas para darle una experiencia inolvidable al usuario final. Pensando en ese concepto, nos enfocamos en este plugin llamado Datatables, que nos brinda todo eso y más.

Datatables es un plugin de la biblioteca del framework jQuery. Es una herramienta muy usada en sistemas web que nos permitirá añadir funcionalidades muy necesarias a tablas HTML para manipular la información a criterio del usuario y añadirá controles avanzados como la de exportar información.

En este artículo explicamos de manera sencilla el uso de datatables y agregando la opción de exportación, tabla responsiva y la información que se maneja es extraída de una base de datos en MySQL usando el lenguaje de programación PHP.

Espero que este breve artículo les ayude en sus proyectos web. Puede descargar el código fuente y la demostración desde el siguiente enlace.

Descargar: Exportar Datatable a excel csv pdf copy print

1 archivo(s) 8.84 KB

Descargar