jQueryは無限のスクロールでさらに多くのボタンを作成します

Question

大きなモニタでは、divコンテンツの制限によって読み込まれた仕上げがあれば、無限のスクロールは別のdivコンテンツを読み込みません。だから、私はこの問題をより多くのボタンをロードすることによって解決しなければならない。

私のコードにもっと多くのボタンをロードするにはどうしたらいいですか？ここで

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!"); 
     } 
    }); 

}); 

は、元のサイトからのライブの例Demoです。

Answer 1

問題は表示されません。 "load-more-button"というidを持つHTMLボタンまたはリンクに追加し、このコードをscroll.jsに追加してください。

$('#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(); 
     } 
    }); 
});