En la entrada de hoy voy a hablar del plugin datatables de jquery, seguramente lo hayas visto en cientos de paginas y seguro te has preguntado que como harán para dar tanta flexibilidad en las tablas html (ordenación por columnas, paginación, buscador, etc).
Pues os voy a explicar como integra el plugin datablas con php de una mnaera sencilla.
De base para el ejemplo voy a utilizar los ejemplo vistos en las entradas leer-un-csv-desde-php y aplicar-estilos-a-un-menu-dinamico-en-php-con-bootstrap para mostrar una table que viene de un csv y aplicando estilos con css.
Partimos del código utilizado para mostrar el csv con un for mediante una tabla html.
<?php
//index.php
//ubicacion csv
define('CSV', '100Records.csv');
//leer csv
$readCsv = array_map('str_getcsv', file(CSV));
?>
<html>
<table border="1">
<?php
//recorremos filas del csv
foreach ($readCsv as $itemCsv) {
echo '<tr>';
//recorremos celdas del csv
foreach ($itemCsv as $elementoItemCSV) {
echo '<td>';
//mostramos la celda
echo $elementoItemCSV;
echo '</td>';
}
echo '</tr>';
}
?>
</table>
</html>
Lo siguiente que haremos sera añadir las librerías de bootstrap y jquery para dar estilos a las tablas.
<?php
//index.php
//ubicacion csv
define('CSV', '100Records.csv');
//leer csv
$readCsv = array_map('str_getcsv', file(CSV));
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table table-sm table-striped table-hover table-bordered">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Nombre</th>
<th scope="col">Apellidos</th>
<th scope="col">Fecha de nacimiento</th>
<th scope="col">Ciudad</th>
<th scope="col">Usuario</th>
</tr>
</thead>
<tbody>
<?php
//recorremos filas del csv
foreach ($readCsv as $itemCsv) {
echo '<tr>';
//recorremos celdas del csv
foreach ($itemCsv as $elementoItemCSV) {
echo '<td>';
//mostramos la celda
echo $elementoItemCSV;
echo '</td>';
}
echo '</tr>';
}
?>
</tbody>
</table>
<div/>
<div/>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>
Para su funcionamiento añadimos el id “example” a la etiqueta table que lo usaremos para enlazar con el javascript y en data-order ponemos que queremos ordenar ascendentemente por el quinto elemento y con data-page-length que queremos 25 elementos por pagina.
<table id="example" data-order='[[ 5, "asc" ]]' data-page-length='25'
class="table table-sm table-striped table-hover table-bordered">
A continuación y al final del fichero añadimos las librerías javascript del plugin datatables par su funcionamiento y el fichero javascript que usaremos para ordenar la table js/datatable.js.
<!--datatables-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
<script type="text/javascript" src="js/datatable.js"></script>
<!--datatables-->
Y por ultimo creamos el fichero js/tatable.js con la llamada al id «example» y con las traducción al español del plugin.
$(document).ready(function() {
$('#example').DataTable({
"columnDefs": [{
"targets": 0
}],
language: {
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ resultados",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando resultados _START_-_END_ de _TOTAL_",
"sInfoEmpty": "Mostrando resultados del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sSearch": "Buscar:",
"sLoadingRecords": "Cargando...",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
}
});
});
Obtiendo el siguiente resultado.
El codigo final es el siguiente:
<?php
//index.php
//ubicacion csv
define('CSV', '100Records.csv');
//leer csv
$readCsv = array_map('str_getcsv', file(CSV));
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="table-responsive">
<table id="example" data-order='[[ 5, "asc" ]]' data-page-length='25'
class="table table-sm table-striped table-hover table-bordered">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Nombre</th>
<th scope="col">Apellidos</th>
<th scope="col">Fecha de nacimiento</th>
<th scope="col">Ciudad</th>
<th scope="col">Usuario</th>
</tr>
</thead>
<tbody>
<?php
//recorremos filas del csv
foreach ($readCsv as $itemCsv) {
echo '<tr>';
//recorremos celdas del csv
foreach ($itemCsv as $elementoItemCSV) {
echo '<td>';
//mostramos la celda
echo $elementoItemCSV;
echo '</td>';
}
echo '</tr>';
}
?>
</tbody>
</table>
<div/>
<div/>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!--datatables-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
<script type="text/javascript" src="js/datatable.js"></script>
<!--datatables-->
</html>
//js/datatable.js
$(document).ready(function() {
$('#example').DataTable({
"columnDefs": [{
"targets": 0
}],
language: {
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ resultados",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando resultados _START_-_END_ de _TOTAL_",
"sInfoEmpty": "Mostrando resultados del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sSearch": "Buscar:",
"sLoadingRecords": "Cargando...",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
}
});
});
El codigo lo puedes obtener de aqui https://github.com/victorgarciasisi/dataTablesPHP
Y aqui lo puedes ver en funcionamiento http://programacionconphp.com/dev/dataTablesPHP/
¡¡Muchas gracias!! Me sirvió de mucho.
Buena herramienta, gracias.
Hola buena tarde, para cambiar el número de columnas? Muchas gracias plis
EL orden por defecto utilizado es el del csv de origen, con lo que la manera mas sencilla es editar las columnas en el csv de origen
Muchas gracias !!! queria saber si se puede hacer lo mismo con Json espero su respuesta gracias ..
Sí se puede hacer lo mismo, en lugar de leer el .csv, lees el archivo que contiene el json antes $contenidoArchivoJson= fileget_content(«archivo.json») y luego transformas eso que leíste en un arreglo así: $contendioArchivoArray= json_decode($contenidoArchivoJson, true) Ya teniendo la información como arreglo, puedes recorrerlo, dependiendo de su estructura, con foreach()
sabes algo para poder hacer la paginacion tipo url ? es decir que se vayan cargando paginas con un limit y que este se vaya aumentando, con datatable y php es que por lo que he visto si el tiempo de respuesta ha sido demasiado largo ya que se manejan registros de mas de 20k