jQuery sonsuz kaydırmaya sahip daha fazla düğme oluştur

Question

Daha büyük monitörde, sonsuz içerikli kaydırma, div içerik sınırlaması ile tamamlandığında daha fazla başka bir div içeriği yüklemez. Bu yüzden daha fazla düğme oluşturarak bu sorunu düzeltmem gerekiyor.

Koduma nasıl daha fazla düğme oluştururum?

scroll.php

include('db.php'); 

if(isset($_REQUEST['actionfunction']) && $_REQUEST['actionfunction']!=''){ 
$actionfunction = $_REQUEST['actionfunction']; 
    call_user_func($actionfunction,$_REQUEST,$con,$limit); 
} 

function showData($data,$con,$limit){ 
    $page = $data['page']; 
    if($page==1){ 
     $start = 0; 
    } 
    else{ 
     $start = ($page-1)*$limit; 
    } 

    $sql = "select * from infinitescroll order by id asc limit $start,$limit"; 
    $str=''; 
    $data = $con->query($sql); 
    if($data!=null && $data->num_rows>0){ 
     while($row = $data->fetch_array(MYSQLI_ASSOC)){ 
     $str.="<div class='data-container'><p>".$row['id']."</p><p>".$row['firstname']."</p><p>".$row['lastname']."</p></div>"; 
    } 
     $str.="<input type='hidden' class='nextpage' value='".($page+1)."'><input type='hidden' class='isload' value='true'>"; 
    } else { 
     $str .= "<input type='hidden' class='isload' value='false'><p>Finished</p>"; 
    } 
echo $str; 
} 

scroll.js

var ajax_arry = []; 
var ajax_index = 0; 
var sctp = 100; 
$(function() { 
    $('#loading').show(); 
    $.ajax({ 
     url: "scroll.php", 
     type: "POST", 
     data: "actionfunction=showData&page=1", 
     cache: false, 
     success: function (response) { 
      $('#loading').hide(); 
      $('#demoajax').html(response); 

     } 

    }); 
    $(window).scroll(function() { 

     var height = $('#demoajax').height(); 
     var scroll_top = $(this).scrollTop(); 
     if (ajax_arry.length > 0) { 
      $('#loading').hide(); 
      for (var i = 0; i < ajax_arry.length; i++) { 
       ajax_arry[i].abort(); 
      } 
     } 
     var page = $('#demoajax').find('.nextpage').val(); 
     var isload = $('#demoajax').find('.isload').val(); 

     if ((($(window).scrollTop() + document.body.clientHeight) == $(window).height()) && isload == 'true') { 
      $('#loading').show(); 
      var ajaxreq = $.ajax({ 
       url: "scroll.php", 
       type: "POST", 
       data: "actionfunction=showData&page=" + page, 
       cache: false, 
       success: function (response) { 
        $('#demoajax').find('.nextpage').remove(); 
        $('#demoajax').find('.isload').remove(); 
        $('#loading').hide(); 

        $('#demoajax').append(response); 

       } 

      }); 
      ajax_arry[ajax_index++] = ajaxreq; 

     } 
     return false; 

     if ($(window).scrollTop() == $(window).height()) { 
      alert("bottom!"); 
     } 
    }); 

}); 

İşte örnek orijinal siteden Demo canlı var.

Answer 1

Bir sorun görmüyorum. id "yük daha-butonu" ile html düğme veya bağlantı içine ekleyin ve bu kod

$('#load-more-button').click(function(e) { 
    e.preventDefault(); 

    var page = $('#demoajax').find('.nextpage').val(); 

    $('#loading').show(); 
    $.ajax({ 
     url: "scroll.php", 
     type: "POST", 
     data: "actionfunction=showData&page=" + page, 
     cache: false, 
     success: function (response) { 
      $('#demoajax').find('.nextpage').remove(); 
      $('#demoajax').find('.isload').remove(); 
      $('#loading').hide(); 
      $('#demoajax').append(response); 

      var isload = $('#demoajax').find('.isload').val(); 
      if(!isload) $('#load-more-button').hide(); 
     } 
    }); 
});