I siti web moderni preferiscono all’impaginazione dei risultati delle query il caricare sulla stessa pagina altri risultati (il famoso Carica altro) tramite la pressione di un tasto/link o tramite il raggiungimento della fine pagina.
Tra i vari metodi disponibili il più semplice lo si ottiene tramite jquery e si può adattare a molti script e linguaggi.
Per fare questo usiamo due metodi che ci offre il frameworks jquery: .append e .load.
Il metodo .append serve per poter accodare un contenuto all’interno dell’elemento al quale è associato.
Il metodo .load carica, invece, il contenuto di un file all’interno di un div.
Per quanto riguarda l’html sarà sufficiente creare un div al quale assegnamo l’id “contenuto” all’interno del quale carichiamo la nostra pagina con i dati aggiuntivi.
<div id="contenuto"></div>
Per quanto riguarda lo script ci limitiamo a scrivere la funzione che carica la pagina dentro contenuto:
<script>
function aggiungi (pag) {
$('#contenuto').append($("<div>").load("caricaaltro2.aspx?id="+pag));
}
</script>
Nello script abbiamo aggiunto una variabile che passa il numero di pagina nel caso dovessi caricare più pagine.
Posso anche aggiungere la funzione che nasconde il div che mi mostra “carica altri”:
$("#linnk").click(function() {$(this).hide();});
Nella pagina caricata mi limiterò a inserire lo stesso script e lo stesso div.
Script completo prima pagina
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="utf-8" %>
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
body { color: #000; text-align:center; background-color: #FFF; }
.quadrati { width:200px; height:200px; margin:2px 2px 2px 2px; display:inline-block; border:#354D46 1px solid; }
img { height:100%; width:auto; max-width:190px; }
</style>
<%dim pag = 2%>
</head>
<body>
<p>CARICA ALTRO ESEMPIO</p>
<div class="quadrati">
<img src="https://www.filoweb.it/galleria2015/foto/R06939V9BEM0AWYTUVM5VOQMEP0Q9O.jpg" >
</div>
<div class="quadrati">
<img src="https://www.filoweb.it/galleria2015/foto/LN6VNQDBH_NH77SWWRRBP6YJX7BDMQ.jpg" >
</div>
<div class="quadrati">
<img src="https://www.filoweb.it/galleria2015/foto/LVXNE6SIG86TAO8YBPBK3Q6A9D5VAF.jpg" >
</div>
<div id="contenitore" style="width:100%;">
<div id="contenuto" style="width:100%;"></div>
</div>
<div id="blinnk"><a href="javascript:aggiungi(<%response.write(pag)%>);" id="linnk" style="width:100%; background-color:#354D46; text-align:center; color:#FFF;" title="Carica tutti" >CARICA ALTRI</a></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$("#linnk").click(function() {$("#blinnk").hide();});
function aggiungi (pag) {
$('#contenuto').append($("<div>").load("caricaaltro2.aspx?id="+<%response.write(pag)%>));
}
</script>
</body>
</html>
Script completo 2° pagina
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="utf-8" %>
<!doctype html>
<html >
<style type="text/css">
body { text-align:center; }
.quadrati { width:200px; height:200px; margin:2px 2px 2px 2px; display:inline-block; border:#354D46 1px solid; }
img { height:100%; width:auto; max-width:190px; }
</style>
</head>
<body>
<%
dim pag
pag=request.QueryString("id")
pag=pag+1
%>
<div id="contenitore">
<h3> questa è la pagina <%response.write(pag)%></h3>
<div class="quadrati">
<img src="https://www.filoweb.it/galleria2015/foto/YLAUXHFWF52IBFJC7TJAZ_Z9ESH799.jpg" >
</div>
<div class="quadrati">
<img src="https://www.filoweb.it/galleria2015/foto/PA8I4_C_J8GFA808JSS4QVQT9NK2FH.jpg" >
</div>
<div class="quadrati">
<img src="https://www.filoweb.it/galleria2015/foto/YLAUXHFWF52IBFJC7TJAZ_Z9ESH799.jpg" >
</div>
<div id="blink<%response.write(pag)%>" style="width:100%; background-color:#293343;"><a href="javascript:aggiungi(<%response.write(pag)%>);" id="linnk<%response.write(pag)%>" style="width:100%; background-color:#354D46; text-align:center; color:#FFF;" title="Carica tutti" >CARICA ALTRI</a></div>
<div id="contenitore" style="width:100%;">
<div id="contenuto" style="width:100%;"></div>
</div>
</div>
<div id="contenitore" style="width:100%;">
<div id="contenuto" style="width:100%;"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$("#linnk<%response.write(pag)%>").click(function() {$("#blinnk<%response.write(pag)%>").hide();});
function aggiungi (pag) {
$('#contenuto').append($("<div>").load("caricaaltro2.aspx?id="+<%response.write(pag)%>));
}
</script>
</body>
</html>