Полоса прокрутки с прогрессивной загрузкой #PHP?
Я пытаюсь создать полосу прокрутки, которая загружает за раз только определенное количество элементов. Допустим, у меня есть 45 элементов для отображения и по одной строке для каждого элемента. Я хочу загрузить первые 15, затем прокрутить, а затем загрузить еще один набор из 15 элементов и так далее, и так далее.
В настоящее время это записано в файле .php, и я использую Div со следующими "настройками"
print("<div class='scrolldiv' style='width: 70vw; height: 90vh; overflow-y: scroll; margin-top: 4vh; margin-left: 4vw;'><table><hr><th>Set ID</th><th>Set Name</th><th>Category Name</th></hr> </div>");
Весь код чрезвычайно WIP (в стадии разработки)
<?php include("navbar.php");
?>
<?php
// Cencored the connection :)
$connection = mysqli_connect("Database","data","","data");
$search = $_GET['search'];
$limit = $_GET['limit'];
if ($limit == 0){
$limit = 13361;
}
$counter = 0;
$result = mysqli_query($connection,
"SELECT * FROM sets LIMIT $limit");
print("<div class='scrolldiv' style='width: 70vw; height: 90vh; overflow-y:
scroll; margin-top: 4vh; margin-left: 4vw;'><table><hr><th>Set ID</th>
<th>Set Name</th><th>Category Name</th></hr> </div>");
while ($row = mysqli_fetch_array($result)){
$SetID = $row['SetID'];
$Setname = $row['Setname'];
print(" <div class='row'> <tr>
<td>$SetID</td> <td>$Setname</td>
<td>$Quantity</td></tr> </div>");
$counter = $counter + 1;
$i = $i + 1;
} // end while
echo $counter;
print("</table></div>");
?>
</body>
</html>
Вам нужно искать про ленивую загрузку
В чем именно заключается ваш вопрос? Все, что вы сделали, это сказали нам, что вы хотите. Мы понятия не имеем, какая часть на самом деле доставляет вам проблемы. И вы должны быть более конкретными, чем «Я не знаю, как это сделать».
вы должны разделить логику и макет .. общая проблема с PHP. Я бы предложил, чтобы пустой DIV отображался статическим HTML, а затем использовать некоторый JS для запроса PHP, возвращающего JSON, для заполнения и добавления к населению этого DIV в соответствии с тем, что вызывает +15, о котором вы говорите
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы должны отделить взаимодействие с пользователем от внутренней логики. Эта проблема связана с взаимодействием пользователя с клиентом. @flowtron упомянул об этом в комментариях, вы можете добиться этого, динамически загрузив jquery / javascript и вызов ajax в файл php, который у вас есть.
При этом я не рекомендую вам использовать событие прокрутки для запуска внутреннего запроса, это повлияет на работу с клиентом. Я рекомендую создать кнопку «Загрузить еще», которая будет загружать следующий пакет данных с помощью вызова ajax.
Например:
$(document).on("click", "load_more", function(e){
var parameters = {"par1":pa1};
$.ajax({
url: "backend_query.php",
type: "post",
data: parameters,
success: function (response) {
$("#scroll_div").append("<li>elements from response</li>");
}
});
});
возможный дубликат stackoverflow.com/questions/14035180/…