Сделать автопрокрутку загружать больше данных, когда пользователь достигает дна от API
Хорошо, у меня есть 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";
};
Решение
Если бы речь шла только об отображении, я бы поместил содержимое в массив javascript со всеми вашими строками php.
Затем обновите содержимое событием прокрутки, когда оно достигнет дна.
Вот небольшой пример, который я привел, чтобы понять, как мне это сделать:
(имейте в виду, что это основано на идее, что вы загружаете все данные одновременно)
<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>
Другие решения
Других решений пока нет …