|
|
21.07.2016, 20:12
|
|
Блохин Илья Сергеевич
Илья Блохин
Зарегистрирован:
2014-07-23
Сообщений: 5
|
Здравствуйте!
Кто-нибудь работал с ajax пагинацией и подгрузкой данных при скроллинге?
Планируется длинная микс-лента из 4-х разделов, хочется сделать ее как ленту новостей ВКонтакте, чтобы без необходимости не грузить из БД всю "портянку".
Подсмотрел пример:
Есть get.php, где подключаются к БД и выводят отображение запроса, выглядит примерно так:
Код:<?php
// указываем параметры для подключения к MySQL
$host='localhost'; // имя хоста
$database='lazyloader'; // имя базы данных
$user='root'; // имя пользователя
$pass=''; // пароль пользователя
// подключаемся к MySQL
$db = mysql_connect($host, $user, $pass)
or die("Не могу соединиться с MySQL!");
mysql_select_db($database)
or die("Не могу подключиться к базе данных!");
$begin = ($_POST["begin"])?$_POST["begin"]:0;
$count = ($_POST["count"])?$_POST["count"]:15;
$query = "SELECT * FROM geobaza_objects WHERE type='country' LIMIT ".$begin.",".$count."";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
echo "<article>";
echo "<p><strong>Английское название: </strong>".$row["name_en"]."</p>";
echo "<p><strong>Русское название: </strong>".$row["name_ru"]."</p>";
echo "</article>";
} ?>
В index.php этот блок подцепляется через:
Код:<?php $_POST["count"] = 20;
include("./get.php"); ?>
И дописывается непосредственно сам ajax:
Код:<script>
$(document).ready(function(e){
var count = 20;
var begin = 0;
function scrolling(){
var currentHeight = $(this).children(".wrapper").height();
if($(this).scrollTop() >= (currentHeight - $(this).height()-100)){
$(this).unbind("scroll");
loader();
}
}
function loader(){
$.ajax({
type:"POST",
url:"./get.php",
data:{
count: count,
begin: begin*count
},
success:onAjaxSuccess
});
function onAjaxSuccess(data)
{
$(".wrapper").append(data);
$(".text").on("scroll", scrolling);
}
begin++;
}
$(".text").on("scroll", scrolling);
});
</script>
Проблема выделена красным цветом.
В моем отображении запроса много netcat-овских функций, типа nc_auth_get_relation и т.д., которые при выносе во внешний php скрипт естественно выдают ошибку.
Я оставил SQL-запрос, выдачу запроса и ajax-скрипт на одной странице, а вместо
поставил:
.
В итоге в область, где выгружается лента при прокрутке вниз подгружается ВСЯ СТРАНИЦА ЦЕЛИКОМ вместе с макетом дизайна. И получается сон во сне, во сне и т.д. ...
Кто-нибудь знает, в чем беда и как обойтись без вынесения запроса и его вывода в отдельный php?
Заранее благодарен!
Кто знает наверняка и может помочь - пишите в личку - поблагодарю рублем.
Илья
|
|
|
22.07.2016, 10:36
|
|
Константин
Константин
Зарегистрирован:
2010-07-20
Сообщений: 210
|
Добрый день, Игорь
Предлагаю вам обратиться к решению попроще.
По вашему
Цитата:В итоге в область, где выгружается лента при прокрутке вниз подгружается ВСЯ СТРАНИЦА ЦЕЛИКОМ вместе с макетом дизайна.
чтобы макет дизайна не подключался, добавьте к урлу ?isNaked=1 или в блок data:{isNaked:1}
orlovkn
|
|
|
22.07.2016, 11:45
|
|
Блохин Илья Сергеевич
Илья Блохин
Зарегистрирован:
2014-07-23
Сообщений: 5
|
Добрый день, orlenkokn!
Спасибо за ответ.
?isNaked=1 действительно убирает макет, но проблемы это не решает - лента все равно подгружает объекты, начиная с 1-ого элемента. Структура ленты получается такой:
|| ( [1:9] || ( [1:9] || ( [10:19] || ( [1.. - страница виснет ) ) ) )
|| - это фильтры, которые находятся НАД <div>, куда осуществляется выгрузка ajax.
[1:9] - объекты с 1 по 9.
( - открывается новая область прокрутки. У div, куда осуществляется выгрузка, overflow: auto и четко заданная высота.
В общем, живой пример могу сбросить в личку.
----------------------
Тот более простой способ пока не знаю, как применить в моей ситуации. У меня SQL-запрос и отображение объектов записано в префиксе компонента, и полей в нем нет. Т.е. это могло бы быть куском макета дизайна.
Мне надо вывести объекты из нескольких компонентов в одну ленту, для каждого в отдельности настроить условия отображения и свой дизайн отображения.
Запрос такой:
Код:<?
$begin = ($_POST["begin"])?$_POST["begin"]:0;
$count = ($_POST["count"])?$_POST["count"]:10;
$checkedrowS = $nc_core->db->get_results("
SELECT Sub_Class_ID, Message_ID AS msg, Date, mydream_title AS title, mydream_detail AS announce, User_ID AS author_id, perm FROM Message200
WHERE perm=3 OR perm=2
UNION
SELECT Sub_Class_ID, Message_ID, Date, NewsTitle, Announce, User_ID, check_perm FROM Message214
UNION
SELECT Sub_Class_ID, Message_ID, Date, NewsTitle, Announce, User_ID, check_perm FROM Message215
UNION
SELECT Sub_Class_ID, Message_ID, Date, NewsTitle, Announce, User_ID, check_perm FROM Message208
ORDER BY Date DESC
LIMIT ".$begin.",".$count.";
");
Ваш пример с $nextLink мог бы подойти, если бы речь шла о списке объектов компонента и выборке данных из соответствующей бд таблицы компонента...
Илья
|
|
|
22.07.2016, 16:15
|
|
Блохин Илья Сергеевич
Илья Блохин
Зарегистрирован:
2014-07-23
Сообщений: 5
|
В префиксе компонента оставил только SQL запрос и вывод результатов.
Подключил раздел с этим компонентом /page/
Создал отдельный макет дизайна с <div id="ajax"></div>, куда осуществляется выгрузка из ajax. Прописал там же ajax скрипт с указанием url: /page/?isNaked=1 . Там же через s_list_clsss() подцепил /page/ и вывел внутри <div id="ajax"></div>.
Подключил раздел /page2/ c созданным макетом дизайна.
Получилось следующее:
Выводится первые 1.. N (число задается) записей, допустим, первые 5. Далее при прокрутке вниз после 5-ой подгружается 1, 2 .. 5, а потом 6 и т.д. То есть заработало, но почему-то после первой подгрузи дублируются первые записи. В остальном вышло то, что надо!
Дело в нем:
Код:
$(document).ready(function(e){
var count = 5;
var begin = 0;
function scrolling(){
var currentHeight = $(this).children(".wrapper").height();
if($(this).scrollTop() >= (currentHeight - $(this).height()-100)){
$(this).unbind("scroll");
loader();
}
}
function loader(){
$.ajax({
type:"POST",
url:"http://www.mysleep.online/line/?isNaked=1",
data:{
count: count,
begin: begin*count
},
success:onAjaxSuccess
});
function onAjaxSuccess(data)
{
$(".wrapper").append(data);
$(".text").on("scroll", scrolling);
}
begin++;
}
Но никак не могу понять, где именно...
--------------
Получилось.
var begin = 1;
Илья
|
