En este tutorial, le mostraré cómo puede cargar datos dinámicamente en div scroll usando php, mysql, jquery y ajax o puede decir que a Facebook le gusta la paginación. cargado al instante.
En este ejemplo, tengo una base de datos de países y necesito mostrar toda la lista de países dentro del div, por lo que cuando el usuario se desplace por el país, se cargará la siguiente lista de países.
En primer lugar, cree una base de datos de países.
CREATE TABLE IF NOT EXISTS `countries` ( `id` int(11) NOT NULL AUTO_INCREMENT, `sortname` varchar(3) NOT NULL, `name` varchar(150) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=247 ; |
Cree un archivo php para conectarse con la base de datos y obtener la lista de países según el límite.
<?php
$hostname = "localhost";
$username = "root";
$password = "root";
$dbname = "location";
$limitStart = $_POST['limitStart'];
$limitCount = 50; // Set how much data you have to fetch on each request
if(isset($limitStart ) || !empty($limitStart)) {
$con = mysqli_connect($hostname, $username, $password, $dbname);
$query = "SELECT id, name FROM countries ORDER BY name limit $limitStart, $limitCount";
$result = mysqli_query($con, $query);
$res = array();
while($resultSet = mysqli_fetch_assoc($result)) {
$res[$resultSet['id']] = $resultSet['name'];
}
echo json_encode($res);
}
?> |
Ahora crea un archivo html y pon algo de css y html
<style>
.country { height: 300px; overflow: auto; width: 500px; }
.loading { color: red; }
li {font-size:24px;}
#loading { display:none; color:red; font-size:30px; }
</style>
<div class="country">
<ul id="results"></ul>
</div>
<span id="loading">Loading Please wait...</span> |
Después de eso, escriba jquery para enviar la solicitud al servidor en div scroll
<script>
$(function() {
loadResults(0);
$('.country').scroll(function() {
if($("#loading").css('display') == 'none') {
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
var limitStart = $("#results li").length;
loadResults(limitStart);
}
}
});
function loadResults(limitStart) {
$("#loading").show();
$.ajax({
url: "request.php",
type: "post",
dataType: "json",
data: {
limitStart: limitStart
},
success: function(data) {
$.each(data, function(index, value) {
$("#results").append("<li id='"+index+"'>"+value+"</li>");
});
$("#loading").hide();
}
});
};
});
</script> |
Ahora su archivo index.html final será
index.html
<style>
.country { height: 300px; overflow: auto; width: 500px; }
.loading { color: red; }
li {font-size:24px;}
#loading { display:none; color:red; font-size:30px; }
</style>
<div class="country">
<ul id="results"></ul>
</div>
<span id="loading">Loading Please wait...</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
loadResults(0);
$('.country').scroll(function() {
if($("#loading").css('display') == 'none') {
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
var limitStart = $("#results li").length;
loadResults(limitStart);
}
}
});
function loadResults(limitStart) {
$("#loading").show();
$.ajax({
url: "request.php",
type: "post",
dataType: "json",
data: {
limitStart: limitStart
},
success: function(data) {
$.each(data, function(index, value) {
$("#results").append("<li id='"+index+"'>"+value+"</li>");
});
$("#loading").hide();
}
});
};
});
</script> |
Vea la demostración en vivo y descargue el código fuente.
| DEMO | DESCARGAR |
