Curso PHP y MySQL 5: Paginación, Ordenamiento y Búsqueda

por

En este tutorial vamos a agregar paginación al resultado en una consulta, ordenar por columnas y buscar dentro del resultado sin hacer otra consulta a la base de datos, en lenguaje PHP con conexión a base de datos en MySQL.

Requisitos:

Ver Demo

El plugin Datatables nos ayuda a agregar los datos en una tabla y nos facilita el trabajo agregando herramientas como, paginación, ordenamiento y búsqueda, ademas es personalizable a nuestros requerimientos.

Cargar Base de Datos

Al cargar el respaldo en la base de datos les puede enviar un error ya que el archivo sql tiene mucha información y es muy grande para cargarse:

La primera solución es cargarlo mediante la consulta de MySQL. Mas información.

La segunda opción para aumentar el tamaño máximo de importación en el PhpMyAdmin, hay que aumentar el tamaño máximo de subida de archivos en el php.ini. Esto se hace editando los siguientes parámetros en el phpmyadmin:

post_max_size = 50M
upload_max_filesize = 50M
max_execution_time = 500
max_input_time = 500
memory_limit = 512M

index.php

En la parte del head incluimos el CSS y JS de Datatables:

<link href="css/jquery.dataTables.min.css" rel="stylesheet">	
<script src="js/jquery.dataTables.min.js"></script>

Agregamos la funciones para personalizar el lenguaje (head):

<script>
	$(document).ready(function(){
		$('#mitabla').DataTable({
			"order": [[1, "asc"]],
			"language":{
				"lengthMenu": "Mostrar _MENU_ registros por pagina",
				"info": "Mostrando pagina _PAGE_ de _PAGES_",
				"infoEmpty": "No hay registros disponibles",
				"infoFiltered": "(filtrada de _MAX_ registros)",
				"loadingRecords": "Cargando...",
				"processing":     "Procesando...",
				"search": "Buscar:",
				"zeroRecords":    "No se encontraron registros coincidentes",
				"paginate": {
					"next":       "Siguiente",
					"previous":   "Anterior"
				},					
			}
		});	
	});	
</script>

Ahora a la tabla le cambiamos la clase y agregamos un id, este id debe ser el mismo del script de jQuery:

<table class="display" id="mitabla">

El resultado es una tabla con paginación, ordenamiento por columnas y búsqueda en tiempo real:

Nota: En la descarga trae el script para procesar miles de registros.

Recuerda suscribirte a nuestro canal de YouTube, ¡¡¡Es Gratis!!!

Tutorial en Vídeo: