beim-seiten-ende-neue-daten-laden.php
Quell Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Inhalte per Ajax nachladen</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
body{
height:1000px;
}
div ,table{
border: 1px solid #ccc;
}
#fest{
position:fixed;
top:5px;
right:20px;
color:black;
height:80px;
width:300px;
border:2px solid blue;
background:lightgrey;
overflow:auto;
}
.loading {
text-align: center;
position: fixed;
display:none;
color: #fff;
z-index: 999999;
background: blue;
padding: 8px 18px;
border-radius: 5px;
left: calc(50% - 45px);
top: calc(50% - 18px);
}
</style>
</head>
<body>
<div class="loading" v-show="loading">
<span class="fa fa-spinner fa-spin"></span> Loading
</div>
<div id="fest">
<div id="main0"></div>
<div id="main1"></div>
<div id="main2"></div>
</div>
</body>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
localStorage.setItem('start',0);
$(window).scroll(function () {
scroll=$(window).scrollTop();
scrollheight=$(document).scrollTop();
doc=$(document).height()-700;
//win=$(window).height();
//h=doc-win;
document.getElementById('main0').innerHTML=doc+' - '+scroll+' - '+scrollheight;
if(scrollheight>doc){
start1=localStorage.getItem('start');
document.getElementById('main1').innerHTML='Datensatz '+start1+' am Laden';
var start=parseInt(start1)+20;
weiter(start);
localStorage.setItem('start',start);
}
});
function weiter(start){
an();
$.ajax({
type: 'POST',
url: 'scrollladen.php',
data: {start:start},
success: function(data){
document.getElementById('main2').innerHTML=start+' geholt';
$('body').append('<table>'+data+'</table>');
}
});
}
function an (){
document.getElementsByClassName('loading')[0].style.display='block';
setTimeout(function(){
document.getElementsByClassName('loading')[0].style.display='none';
}, 1200);
}
</script>
</html>