En el anterior ejemplo habíamos visto como hacer, paginacion con PHP y MySQL, que parecía bastante genial para mostrar datos de 10 en 10 o ya sea con otros valores. En  este otro ejemplo vamos ver como hacer paginación con scroll infinito en php mysql y jQuery.

EN GITMEDIO

Cómo hacer paginación codigo en php y mysql

Como ya habíamos dicho la paginación numeral clic, quizá no sea tan efectivo  para los usuarios, por qué al hacer click  se hace la toma de una decisión importante, mientras al hacer scroll se  puede continuar leyendo, tal es el caso de Facebook que usa la  paginación con scroll infinito en php mysql.

En el siguiente ejemplo se muestra: como hacer paginacion con scroll infinito en php mysql y jQuery, de la cual estaremos usando un plugin llamado jScroll para hacer el scrolling, en otras palabras se puede decir, desplazar  la barra de desplazamiento del navegador ya sea de un contenedor para mostrar datos desde la base de datos MySQL.

A continuacion se muestra ejemplo de la tabla en MySQL

CREATE DATABASE scroll;

CREATE TABLE `table_pag` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `Title` varchar(255) DEFAULT NULL,
  `Image` varchar(255) DEFAULT NULL,
  `Descritption` text,
  `Url` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=latin1;


INSERT INTO `table_pag` VALUES ('1', 'Cómo hacer paginación codigo en php y mysql', 'http://lorempixel.com/400/200/', 'Height is optional, if no height is specified the image will be a square. Example: https://dummyimage.com/300; Must be the first option in the url; You can specify', 'http://gitmedio.com/');
INSERT INTO `table_pag` VALUES ('2', 'lorempixel - placeholder images for every case', 'http://lorempixel.com/400/200/', 'Insanely fast, mobile-friendly meme generator. Caption memes or upload your own images to make custom memes.', 'https://imgflip.com/memegenerator');
INSERT INTO `table_pag` VALUES ('3', 'Image Code Generator - HTML.am', 'http://lorempixel.com/400/200/', 'Echa un vistazo a los ejemplos de Curriculum Vitae que tienes a continuación y aprende a redactar tu ejemplo de currículum de la mejor manera posible.', null);
INSERT INTO `table_pag` VALUES ('4', 'Ejemplo - Wikipedia, la enciclopedia libre', 'http://lorempixel.com/400/200/', 'Patentes de Invención y Modelos de Utilidad · Guía - ejemplo: Búsqueda del estado de la técnica. Diseños y Dibujos Industriales', null);
INSERT INTO `table_pag` VALUES ('5', 'Ejemplo - significado de ejemplo diccionario', 'http://lorempixel.com/400/200/', 'http://lorempixel.com/400/200/ejemplo. Del lat. exemplum. 1. m. Caso o hecho sucedido en otro tiempo , que se propone , o bien para que se imite y siga , si es bueno y honesto , o para que', null);
INSERT INTO `table_pag` VALUES ('6', 'Curriculum Vitae - Ejemplos | Europass', 'http://lorempixel.com/400/200/', 'Test de Inteligencia General: Series de Figuras: Test de Aptitudes: Aptitud verbal: Aptitud Numérica: Aptitud Espacial: Atención:¿Cuantos 2 hay....? Aptitud ...', null);
INSERT INTO `table_pag` VALUES ('7', 'Pruebas psicotecnicas. Ejemplos pruebas psicotécnicas - navarra.es', 'http://lorempixel.com/400/200/', 'El sitio web de Europass utiliza cookies que nos ayudan a brindar nuestros servicios. Para más detalles vean nuestras política de Cookie. OK, I agree', null);
INSERT INTO `table_pag` VALUES ('8', 'ejemplo - Definición - WordReference.com', 'http://lorempixel.com/400/200/', 'El sitio web de Europass utiliza cookies que nos ayudan a brindar nuestros servicios. Para más detalles vean nuestras política de Cookie. OK, I agree', null);
INSERT INTO `table_pag` VALUES ('9', 'Ejemplos de fe | Fe verdadera - jw.org', 'http://lorempixel.com/400/200/', 'El sitio web de Europass utiliza cookies que nos ayudan a brindar nuestros servicios. Para más detalles vean nuestras política de Cookie. OK, I agree', null);
INSERT INTO `table_pag` VALUES ('10', 'Ejemplos de matriz foda - Matriz Foda', 'http://lorempixel.com/400/200/', 'El sitio web de Europass utiliza cookies que nos ayudan a brindar nuestros servicios. Para más detalles vean nuestras política de Cookie. OK, I agree', null);
INSERT INTO `table_pag` VALUES ('11', '15 Ejemplos que te inspirarán a hacerte un corte de cabello', 'http://lorempixel.com/400/200/', 'El sitio web de Europass utiliza cookies que nos ayudan a brindar nuestros servicios. Para más detalles vean nuestras política de Cookie. OK, I agree', null);
INSERT INTO `table_pag` VALUES ('12', 'Ejemplos del servicio Power BI | Microsoft Power BI', 'http://lorempixel.com/400/200/', 'El sitio web de Europass utiliza cookies que nos ayudan a brindar nuestros servicios. Para más detalles vean nuestras política de Cookie. OK, I agree', null);
INSERT INTO `table_pag` VALUES ('13', '5 Ejemplos de Presentaciones de Ventas en Prezi Business | Prezi Blog', 'http://lorempixel.com/400/200/', 'El sitio web de Europass utiliza cookies que nos ayudan a brindar nuestros servicios. Para más detalles vean nuestras política de Cookie. OK, I agree', null);
INSERT INTO `table_pag` VALUES ('14', 'Ideas y ejemplos - Open data Euskadi - Euskadi.eus', 'http://lorempixel.com/400/200/', 'El sitio web de Europass utiliza cookies que nos ayudan a brindar nuestros servicios. Para más detalles vean nuestras política de Cookie. OK, I agree', null);
INSERT INTO `table_pag` VALUES ('15', '15 Ejemplos de mobiliario urbano e industrial que asombran | OVACEN', 'http://lorempixel.com/400/200/', 'El sitio web de Europass utiliza cookies que nos ayudan a brindar nuestros servicios. Para más detalles vean nuestras política de Cookie. OK, I agree', null);
INSERT INTO `table_pag` VALUES ('16', 'Ejemplos de Curriculum Vitae | Ejemplos de CV | Modelo Curriculum', 'http://lorempixel.com/400/200/', 'El sitio web de Europass utiliza cookies que nos ayudan a brindar nuestros servicios. Para más detalles vean nuestras política de Cookie. OK, I agree', null);

En el siguiente script php se muestra el típico paginación del anterior ejemplo, solo se quito códigos en donde se mostraba la numeración.

 /**
 * Autor: Rodrigo Chambi Q.
 * Mail:  filvovmax@gmail.com
 * web:   www.gitmedio.com
 * Paginador datos para PHP y Mysql, HTML5
 */
$CantidadMostrar=3;
//Conexion  al servidor mysql
$conetar = new mysqli("localhost", "root", "", "scroll");
if ($conetar->connect_errno) {
    echo "Fallo al conectar a MySQL: (" . $conetar->connect_errno . ") " . $conetar->connect_error;
}else{
     // Validado  la variable GET
    $compag         =(int)(!isset($_GET['pag'])) ? 1 : $_GET['pag']; 
	$TotalReg       =$conetar->query("SELECT * FROM table_pag");
	//Se divide la cantidad de registro de la BD con la cantidad a mostrar 
	$TotalRegistro  =ceil($TotalReg->num_rows/$CantidadMostrar);
	 //Operacion matematica para mostrar los siquientes datos.
	$IncrimentNum =(($compag +1)<=$TotalRegistro)?($compag +1):0;
	//Consulta SQL
	$consultavistas ="SELECT
				table_pag.id,
				table_pag.Title,
				table_pag.Image,
				table_pag.Descritption,
				table_pag.Url
				FROM
				table_pag
				ORDER BY
				table_pag.id ASC LIMIT ".(($compag-1)*$CantidadMostrar)." , ".$CantidadMostrar;
	$consulta=$conetar->query($consultavistas);
	while ($lista=$consulta->fetch_row()) {
		 echo "<div class=\"pagdes\">";
	     echo  "<a href=\"\"><img src=".$lista[2].">";
	      echo "<h2>". utf8_encode($lista[1])."</h2>";
	     echo  "<p>".utf8_encode($lista[3])."<p></a><br> <span>GITMEDIO.COM</span>";
	     echo "</div>";
	}
	//Validmos el incrementador par que no genere error
	//de consulta.  
    if($IncrimentNum<=0){}else {
	echo "<a href=\"pagscroll.php?pag=".$IncrimentNum."\">Seguiente</a>";
	}
}

En el siguiente ejemplo se muestra el código para el lado de usuario, es decir aquí es donde se importa la librería  jScroll  y JQuery para implementar la funcionalidad de paginación con scroll infinito en php mysql y jQuery.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Paginacion scroll con php, mysql y Jquery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.jscroll.js"></script>
<style type="text/css">
body{
	font-size: 14px;
	color: #1d2129;
}
.pagdes{
	width: 400px;
	margin:0 auto;
	height: auto;
	margin-bottom:30px;
	border: solid 2px #E4E4E4; 
	padding: 8px;
	background: #FFFFFF;
}
.pagdes h2{
	margin: 0px;
}
.pagdes a{
	text-decoration: none;
	color: #525050;
}
.pagdes span{
	color: #BAB9B9;
	margin: 0px;
}
.scroll {
	border: 1px solid #F4F2F2;
	padding: 5px 10px;
	height: 600px;
	width: 50%;
	margin: 0 auto;
	overflow-y: scroll;
	background: #F7F6F6;
}
.scroll .jscroll-loading{
	 width:20%;
	 margin: -100px auto;
}
</style>
</head>
<body>
<div class="scroll"   style="margin-top:10px;">
//Se importa el archivo php de paginacion simple

</div>
<script>
//Simple codigo para hacer la paginacion scroll
$(document).ready(function() {
	$('.scroll').jscroll({
    loadingHtml: '<img src="gif.gif" alt="Loading" />'
});
});
</script>
</body>
</html>

Descargar el ejemplo: