Neste tutorial, mostrarei como você pode carregar dados dinamicamente no div scroll usando php, mysql, jquery e ajax ou você pode dizer que o facebook como paginação, sempre que o usuário estiver na parte inferior da div ou página, novos dados serão carregado instantaneamente.
Neste exemplo, eu tenho banco de dados de países e preciso exibir toda a lista de países dentro da div, então, sempre que o usuário rolar a div do país, a próxima lista de países será carregada.
Em primeiro lugar, crie o banco de dados 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 ; |
Crie um arquivo php para fazer a conexão com o banco de dados e buscar a lista de países conforme o limite.
<?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);
}
?> |
Agora crie o arquivo html e coloque alguns css e 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> |
Depois disso, escreva jquery para enviar solicitação ao servidor em 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> |
Agora seu arquivo 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> |
Veja a demonstração ao vivo e baixe o código-fonte.
| DEMO | BAIXAR |
