Listado,busqueda y paginación con jquery.dataTables en php y mysql

Hola a todos, en esta oportunidad traigo un ejemplo básico sobre la utilizacion de este plugin javascript, que nos permite sin hacer mucho, poder realizar una paginacion de nuestro listado de registros de alguna tabla de nuestra base de datos, y no solo 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 pagina, sin duda este es un plugin que a los desarrolladores nos es de gran utilidad,el presente ejemplo esta desarrollado en php , y una base de datos en mysql ; asi que sin mucho verbo empecemos

1.- En primer lo que debemos hacer ya que el ejemplo esta en php, sera tener un emulador de servidor web local (xampp, app server, wampp u otro), y tener ejecutado los servicios de mysql y apache

2.- 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

3.- Bien una vez que tenemos nuestra base de datos ya creada , el siguiente paso sera descarganos el plgin que necesitamos, es decir el jquery.datatables , para eso hacemos clic aqui, y dentro de la pagina hacemos clic en download, hasta la fecha de hoy esta en la verion 1.9.1.

4.- Una vez que hemos descargado, descomprimimos todos los archivos que descargamos, para este ejemplo necesitaremos solo algunos archivos de todo lo que descargamos, esos archivos estan 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

5.- Bien, ahora si vamos a crear la estructura del proyecto , que debe quedar asi como la siguiente imagen

copiamos cada archivos de los requeridos de la descarga que hicimos en cada carpeta como esta en la imagen, y las imagenes de la carpeta images son las siguientes:

 6.- Ahora si procedemos a codificar cada archivo de acuerdo al orden que aparece en la imagen del paso 5

CARPETA CSS

   archivo style.css

*{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
$(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 (aqui configuramos el datatable)

$(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

<?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

<?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
<!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>

7.- Ahora si hemos hecho todo bien, ejecutamos el proyecto y el resultado debe ser el siguiente

8.- Si hacemos clic en las siguientes paginas vemos que el paginador funciona

9.- Si realizamos un flitro por algun nombre de pais vemos que funciona adecuadamente

10. Por ultimo si hacemos clic en las cabeceras de las tablas (nombres de las columnas) se acomoda de manera ascendente o descendente según sea el caso

Eso es todo por ahora, recibo comentarios, criticas constructivas y sugerencias 🙂 .. hasta otra oportunidad…. gracias

DEMO

PD: Pueden descargar el proyecto completo aqui