< >

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>