Listado, búsqueda y paginación con jquery.dataTables en PHP y Mysql

Aprende de PHP profesional y de MySQL en Platzi.

Hola a todos, en esta oportunidad traigo un ejemplo básico sobre la utilización de este plugin Javascript, que nos permite sin hacer mucho, poder realizar una paginación de nuestro listado de registros de alguna tabla de nuestra base de datos, y no sólo eso, sino también le agrega, como vemos en la imagen principal, una caja de texto para filtrar los datos de acuerdo a lo que escribimos, y también la cantidad que queremos mostrar por página. Sin duda este es un plugin que a los desarrolladores nos es de gran utilidad. El presente ejemplo está desarrollado en PHP y consta de una base de datos en Mysql; así que sin mucho verbo empecemos.

En primer lugar lo que debemos hacer ya que el ejemplo está en PHP, será tener un emulador de servidor web local (xampp, app server, wampp u otro), y tener ejecutado los servicios de MYSQL y Apache.



Ahora para este ejemplo tengo una base de datos llamada datatable, para lo cual dejo aqui el link para descargar el script y solo tenemos que importarlo desde phpMyAdmin, es una base de datos con una tabla llamada countries que contiene 240 registros de países.



Bien, una vez que tenemos nuestra base de datos ya creada, el siguiente paso será descargarnos el plugin que necesitamos, es decir el jquery.datatables . Para eso hacemos click aqui, y dentro de la página hacemos clic en download, hasta la fecha de hoy, está en la versión 1.9.1.

Una vez descargado lo necesario, descomprimimos todos los archivos, para este ejemplo necesitaremos solo algunos archivos de todo lo que descargamos, los cuales están en la siguiente ruta.

• DataTables-1.9.1\media\js\jquery.dataTables.js
  
• DataTables-1.9.1\media\js\jquery.js
  
• DataTables-1.9.1\media\css\demo_table.css

Ahora sí vamos a crear la estructura del proyecto , que debe quedar como la siguiente imagen:



Copiamos cada archivo de los requeridos de la descarga que hicimos en cada carpeta, como está en la imagen, y las imágenes de la carpeta images son las siguientes:





Ahora sí procedemos a codificar cada archivo de acuerdo al orden que aparece en la imagen.

CARPETA CSS
archivo style.css

Código :

*{margin:0;}

body{
background:#F2F2F2;
color:#084B8A;
font-size:16px;
font-family:Arial;

}
#contenido{
background:#fff;
margin:20px auto;
overflow:hidden;
padding:40px ;
border:1px solid #2E9AFE;
width:90%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
input, select{
background:#fff;
border:1px solid #2E9AFE;
padding:5px;
}
header{
background:#1C4583;
color:#fff;
padding:5px;
text-align: center
}

footer{
background:#1C4583;
color:#fff;
padding:5px;
text-align: center

}
footer a{
color:#FF8000;
text-decoration: none;
}
footer a:hover{
color:#F2F5A9;

}

CARPETA JS
archivo funciones.js

Código :

$(document).ready(function(){
verlistado()
//CARGAMOS EL ARCHIVO QUE NOS LISTA LOS REGISTROS, CUANDO EL DOCUMENTO ESTA LISTO
})
function verlistado(){ //FUNCION PARA MOSTRAR EL LISTADO EN EL INDEX POR JQUERY
var randomnumber=Math.random()*11;
$.post(“libs/listarPaises.php”, {
randomnumber:randomnumber
}, function(data){
$(“#contenido”).html(data);
});

}

CARPETA JS
archivo jslistadopaises.js (aquí configuramos el datatable).

Código :

$(document).ready(function(){
$(‘#tabla_lista_paises’).dataTable( { //CONVERTIMOS NUESTRO LISTADO DE LA FORMA DEL JQUERY.DATATABLES- PASAMOS EL ID DE LA TABLA
“sPaginationType”: “full_numbers” //DAMOS FORMATO A LA PAGINACION(NUMEROS)
} );
})

CARPETA LIBS
archivo conexion.php

Código :

<?php
function Conectarse(){
$servidor=”localhost”;
$basededatos=”datatable”;
$usuario=”root”;
$clave=”";
$cn=mysql_connect($servidor,$usuario,$clave) or die (“Error conectando a la base de datos”);
mysql_select_db($basededatos ,$cn) or die(“Error seleccionando la Base de datos”);
mysql_query (“SET NAMES ‘utf8′”);
return $cn;}
?>

CARPETA LIBS
archivo listarPaises.php

Código :

<?php require_once(‘conexion.php’);
$cn= Conectarse();
$listado= mysql_query(“select * from countries”,$cn);
?>

<script type=”text/javascript” language=”javascript” src=”js/jslistadopaises.js”></script>

<table cellpadding=”0″ cellspacing=”0″ border=”0″ class=”display” id=”tabla_lista_paises”>
<thead>
<tr>
<th>id</th><!–Estado–>
<th>Pais</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th></th>

</tr>
</tfoot>
<tbody>
<?php
while($reg= mysql_fetch_array($listado))
{
echo ‘<tr>’;
echo ‘<td >’.mb_convert_encoding($reg['id'], “UTF-8″).’</td>’;
echo ‘<td>’.mb_convert_encoding($reg['country'], “UTF-8″).’</td>’;
echo ‘</tr>’;

}
?>
<tbody>
</table>

CARPETA RAIZ
archivo index.php

Código :

<!DOCTYPE html>
<html>
<head>
<title>Listados y paginacion con jquery datatable</title>
<meta charset=”utf-8″>
<!– ESTILO GENERAL –>
<link type=”text/css” href=”css/style.css” rel=”stylesheet” />
<!– ESTILO GENERAL –>
<!– JQUERY –>
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” language=”javascript” src=”js/funciones.js”></script>
<!– JQUERY –>
<!– FORMATO DE TABLAS –>
<link type=”text/css” href=”css/demo_table.css” rel=”stylesheet” />
<script type=”text/javascript” language=”javascript” src=”js/jquery.dataTables.js”></script>
<!– FORMATO DE TABLAS –>

</head>
<body>
<header id=”titulo”>

<h3>LISTADO Y PAGINACION CON JQUERY.DATATABLE</h3>
</header>

<article id=”contenido”></article>
<footer>
desarrollado para<a target=”_blank”href=”http://www.exsistemas.wordpress.com”> exsistemas.wordpress.com</a>
</footer>
</body>
</html>

Ahora, si hemos hecho todo bien, ejecutamos el proyecto y el resultado debe ser el siguiente:



Si hacemos click en las siguientes páginas vemos que el paginador funciona:



Si realizamos un filtro por algún nombre de país, vemos que funciona adecuadamente:



Por último, si hacemos click en las cabeceras de las tablas (nombres de las columnas) se acomoda de manera ascendente o descendente según sea el caso:

• VER DEMO
  
• Descargar el proyecto completo aquÍ.
  

Eso es todo por ahora, recibo comentarios, críticas constructivas y sugerencias... Hasta otra oportunidad…. gracias

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.