ユーザーがapiからボトムに達すると、自動スクロールが多くのデータをロードします

Question

大丈夫です。データを取得するAPIがあり、データがHTMLページに配置され、ユーザーがスクロールするための配列に配置されます。すべてが働いています。

最初の10個の結果だけをページに入れてから、残りの部分を自動的にアレイからリロードする方法を知りたいと思います。 私はmysqlを使用しているものを見ましたが、配列からデータを取得することはまだ気になります。

何か援助を歓迎します。それだけ表示についてです場合

$url = 'API'; 
$ch = curl_init(); 
curl_setopt($ch, CURLOPT_U`enter code here`RL, $url); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 

curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC); 
$output = curl_exec($ch); 
$info = curl_getinfo($ch); 
curl_close($ch); 


$echo_array = $array['jobs']; 
usort($echo_array, function($a, $b) { 
    return strtotime($a['einsatzstartdatum']) - strtotime($b['einsatzstartdatum']); 
}); 
// print_r($echo_array); 


foreach ($echo_array as $job) 
{ 
    //echo "Id:". $job['ID'] ."\n"; 
    echo "Town:". $job['einsatzort'] ."\n"; 
    echo "stellentitel:". $job['stellentitel'] ."\n"; 
    echo "einsatzstartdatum:". $job['einsatzstartdatum'] ."\n"; 
    echo "bewerbunganlagenbenoetigt:". $job['bewerbunganlagenbenoetigt'] ."\n"."\n"."\n"; 

}; 

Answer 1

は、私はその中のすべてのPHPの行を持つjavascript配列にコンテンツを置きます。

スクロールイベントが下部に達したときにコンテンツを更新します。 （これは、一度にすべてのデータをロードするという考えに基づいている心に留めておく）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 

<script type="text/javascript"> 

    //fill a javascript arr with all your content 
    var dummyContentArr = new Array(); 

    var limit = 10; 

    //just for the example some dummy data 
    for(var i = 0; i < 100; i++) { 
     var dummyContent = 'town: yada ' + i + '"\n"' + 
     'stellentitel: test ' + i + '"\n"' + 
     'einsatzstartdatum: test ' + i + '"\n" ' + 
     'bewerbunganlagenbenoetigt: test ' + i + '"\n"'; 
     dummyContentArr.push(dummyContent); 
    } 

    $(document).ready(function() { 
     displayContent(10); 

     //this scroll event will will update the limit when the scroll bar hits the bottom 
     $('#content').on('scroll', function() { 
      if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { 
       displayContent(limit); 
       limit += 10; 
      } 
     }); 

    }); 

    //just a simple function thingy to update the content 
    function displayContent(limit) { 
     content = ''; 
     for(i = 0; i < limit; i++) { 
      content += dummyContentArr[i]; 
     } 
     $('#content').html(content); 
    } 
</script> 

<style> 
    #content { 
     background-color: red; 
     height: 200px; 
     width: 200px; 
     overflow-y: scroll; 
    } 
</style> 


<div id="content"></div>