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”&gt; 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

22 comentarios el “Listado,busqueda y paginación con jquery.dataTables en php y mysql

  1. hola, si me pudieran ayudar, primero q todo mil gracias este codigo esta genial, pero tengo un problema dentro de la informacion q debo mostrar debo utilizar un rowspan y se me pierden las opciones del combo y del filtro, que debo modificar para q me acepte el rowspan, si muestro otra informacion si me funciona bn

  2. Buen ejemplo pero no funciona en IExplorer, genera un error de javascript en el jquery.js, bastante raro porque en otros navegadores si funciona, sería bueno revisar el bug, la versión de Explorer en donde no funciona es la 8, lo raro es que tengo funcionando jquery y dataTables en un aplicativo y va bien en todo navegador, pero con este ejemplo no funciona, inclusive si se cambia el jquery.js por el que tengo en el aplicativo.

  3. GRACIAS!!!! lo que estaba buscando!! 😀

    Un par de preguntas, cómo puedo darle ORDER BY, intenté en listarpaises.php pero no lo toma….

    Y la otra es, cómo agregarle la funcion onclick, o que en el momento de darle clic pase algo, muchas gracias por tu tiempo y sobre todo por tu trabajo 😀

    Saludos desde Colombia

    • Hoa gracias por tu comentario, bueno con respecto a la primera pregunta , no le veo el sentido , ya que en esa tabla los registros estan en la tabla guardados en orden alfabetico, pero la consulta si quieres de todas maneras hacerlo es “select * from countries order by country ” y con respecto a la segundo pregunda no la entiendo bien..como dice agregarle la funcion onclick??? querras decir el evento onclick…. pero donde quieres agregarle, o quieres que cuando hagas clic en un boton recien te liste??… esa pregunta sorry no te la entendi muy bien …quisiera que fueras mas especifica para poder contestarte tambien claramente 🙂
      cuidate y saludos desde Perú tb 🙂

      • Jejeje, tienes razón tal vez no me expliqué muy bien perdona XD

        Con lo primero, la base de datos que estoy utilizando es diferente, no está ordenada alfabéticamente pero sí necesito que en la consulta la ordene de ese modo, sin embargo al ponerle el order by no me ordena la consulta 😦 no sé por qué, lo que hace es a la primera columna que tengo en Nombre la ordena de modo ASC. No sé que pueda ser…

        Y por otro lado, jeje mira es sencillo, ya tengo todo perfecto, lo que yo quiero es que al momento de hacer clic en cualquier país listado, me lleve a otra página para poder hacer una consulta por método get 😀 es decir poder linkear los resultados de las consultas 😀 Muchas gracias por tu tiempo, quedo pendiente!

        Gab

    • Holam bueno sinceramente con especto al rder by sigo sin entenderte cuando uno mediante una consulta sql quiere ordenar un resultado, lo hace por una determinada columna o campo de tu tabla si tu dices que quieres ordearnal por nombre es sencillo select campo1 , campo2, campo3….campon from tabla order by nombrecapoaordenar , si lo dejas asi lo ordena por defecto ascendentemente si quieres descente le pones al final desc, eso es asi de sencilo, yo no veo la dificultad o disculpa sino t entendi bien, con rspecto a la otro, en el archivo listadopaises.jsp alli recorro los registros y los voy colocando en las celdas de la tabla, si quieres una funcion que al hacer clic en una fila te haga otra cosa primero tienes que hacer la funcion en javascript y luego en la fila que esta dentro del bucle le colocas onclick=”nombrefuncion()”..es asi de simple , o puedes colocarle a esa fila otra celda donde alli cocloques una imagen q identifique a la accion(por ejemplo editar) y alli en la imagen colocas lo mismo onclick=”nombrefuncion()”… bueno si no respondi a tu pregunta lo siento, es que sinceramente asi lo entendi a menos que no sea asi

      espero haberte podido ayuda
      hasta otra oportunidad

  4. jejej, muchas gracias por tu ayuda!!! lo del order by, bueno eso lo entiendo, pero a pesar de hacerlo no funciona, pero no importa jeje lo que si me complica es lo del click y es tal como lo pones!!!! voy a intentar a ver qué tal me va, voy a buscar información acerca de funciones para ver como es el asunto y tratar de hacerlo, muchas gracias por tu tiempo! es muy valiosa tu ayuda 😀 gracias!

    Gab

  5. Baje los plugin, defini las librerias, le coloque el id a la tabla, pero no me hace nada. Lo raro que otro colega en el mismo codigo si le funciona, nose que habra hecho de forma adicional.

  6. gente me da este mensaje,, Warning: mysql_connect() [function.mysql-connect]: Access denied for user ‘root’@’localhost’ (using password: NO) in C:\AppServ\www\datatable\libs\conexion.php on line 7
    Error conectando a la base de datos

  7. Hola,
    Tengo un problema, sólamente me aparecen dos columnas de mi tabla, la cual tiene 5 columnas, me sale sólo la información de dos columnas y no encuentro dónde hacer para que me salga la información de las demás.

    Gracias
    Kike

  8. HOLAS .. bueno me parece genial tu codigo aun no lo probe pero = MUCHAS GRACIAS .. es mejor q estar poniendo table y jugar con los colores … jejejee ENCERIO JUSTO LO Q MUCHOS ESTABAMOS BUSCANDO

  9. Hola Amigo, hice el ejemplo tal y como está y me funciona perfectamente, Pero me dificulta lo siguiente: Hice un cajon de texto donde pido un codigo y quiero que la tabla me muestre todo lo que tiene ese codigo relacionado, pero no se como hacerlo, no se a quien le mando el codigo… no tendrias un ejemplo parecido por ahi!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s