Как правильно реализовать бесконечный скролл с mysql?

Question

[uranus235]

Добрый день! Искал очень долго, но все же не смог найти ответ.

Имеется таблица из базы данных с записями и следующий код jQuery:

$(document).ready(function(){
	var screenHeight = $(window).height();
	$(window).scroll(function(){
		var scroll = $(this).scrollTop();
		var divHeight = $('#data').height();
		var totalHeight = screenHeight + scroll; 
		var left = divHeight - totalHeight;
		if(left < 10)
			$('#loader').html('<img src="images/loading.gif"> Загрузка');
			//ЗДЕСЬ НУЖНА ФУНКЦИЯ
	});
});

Как сделать чтобы изначально на странице отображалось допустим 10 записей а при пролистывании вниз отображались еще 10 записей?

Answer 1

[Владлен Грачев]

Допустим, записи вы выводите по id (можно по дате, можно по каким-то другим критериям сортировки, не суть) в обратном порядке (сначала последние, потом все более старые). Страница, на которой все реализуется, подгружает последние 10 записей из БД и отображает их.

Затем вам нужна либо отдельная страница, либо на той же самой менять поведение при наличии параметра, например, ajax=true. Также в качестве параметра должен передаваться id последней уже подгруженной записи. Параметр можно либо хранить отдельно в какой-то переменной JS, либо в в параметрах блоков (div), соответствующих каждой записи.

Допустим, дело происходит на некой странице /notes. На странице изначально подгружены блоки, у которых в параметрах прописаны id соответствующих записей. Что-нибудь вроде:

<div data-id="346"></div>
<div data-id="345"></div>
…
<div data-id="337"></div>

Вы выбираете data-id последнего поля и используете один из методов для работы с ajax (.ajax(), get(), load()), обращаясь, например, к странице /notes?ajax=true&id=337 или /notes_ajax?id=337, а далее возвращенный результат помещаете под уже имеющиеся записи.

Естественно, /notes?ajax=true или /notes_ajax (что вам удобнее) должен возвращать 10 записей ,у которых id<337 (переданного в соответствующем параметре).

Это все один из очевидных вариантов. Вы можете изменить и усложнить его как угодно. Все остальное решает документация. Писать за вас непосредственно код не станет никто.

Comments

[uranus235]

Большое спасибо!

Answer 2

[Сергей Протько]

$.AJAX

Comments

[uranus235]

я знаю адрес официального сайта jquery, но на данный момент он не к чему, так как времени маловато