infiniti-scroll-load-next-page.php

Quell Code

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
 

<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js"></script>
<style>
  
  body {
  font-family: sans-serif;
  line-height: 1.4;
  font-size: 18px;
  padding: 80px 20px;
  max-width: 640px;
  margin: 0 auto;
}

.status-bar {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  padding: 20px;
  background: hsla(0, 0%, 100%, 0.9);
  border-bottom: 1px solid #DDD;
  text-align: center;
  z-index: 1;
}

.post {
  border-top: 1px solid #DDD;
  margin: 60px 0;
}

.post img {
  display: block;
  max-width: 100%;
}

.page-load-status {
  display: none; /* hidden by default */
  padding-top: 20px;
  border-top: 1px solid #DDD;
  text-align: center;
  color: #777;
}

/* loader ellips in separate pen CSS */

  
</style>



<div class="status-bar">0 pages loaded</div>

<h1>Infinite Scroll - loadCount, vanilla JS</h1>

<div class="container">
  <article class="post">
   </article>
 
</div>
<div id="more">
</div>
<div class="page-load-status">
  <div class="loader-ellips infinite-scroll-request">
    <span class="loader-ellips__dot"></span>
    <span class="loader-ellips__dot"></span>
    <span class="loader-ellips__dot"></span>
    <span class="loader-ellips__dot"></span>
  </div>
  <p class="infinite-scroll-last">End of content</p>
  <p class="infinite-scroll-error">No more pages to load</p>
</div>
<script>
 
 var statusBar = document.querySelector('.status-bar');
var start=20;
function getPenPath() {

start=start+20;
   $.ajax({
             type: 'POST',
             url: 'scrollladen.php',
             data: {start:start},
             success: function(data){ 
              statusBar.textContent =' Ajax läd gerade';
                  //document.getElementById('main2').innerHTML=start+' geholt';  
                 // $('#more').append('<table>'+data+'</table>');
                    return '<article class="post"><table>'+data+'</table></article>'; 
             }
    });
  
 
}

 
var infScroll = new InfiniteScroll( '.container', {
  path: getPenPath,
  append: '.post',
  status: '.page-load-status',
});


infScroll.on( 'load', function() {
alert(infScroll.loadCount)
  statusBar.textContent = infScroll.loadCount + ' pages loaded';
});

  
</script>