Ordenar y paginar tablas dinámicas con datatables jquery y PHP

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> 
Tabla html con el csv

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>

Tabla con estilos de bootstrap

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/

4 comentarios en “Ordenar y paginar tablas dinámicas con datatables jquery y PHP”

Deja un comentario