@shinoaq

Бесконечный скролл без использования доп страниц?

У меня на странице отображается таблица размером более двух тысяч элементов, необходимо добавить постепенную загрузку по скроллу (infinite scroll/lazy loading), все реализации, что находил используют загрузку следующей страницы, как сделать постепенную прогрузку без подобных костылей?
Код:
<body>
   <div id="list">
      <table id="listTable" table class="table table-bordered">
         <tr class="header">
            <th>#</th>
            <th>name</th>
            <th>price</th>
         </tr>
         <?... ?>
      </table>
   </div>
</body>

То есть необходимо, чтобы именно этот участок:
<th>#</th>
            <th>name</th>
            <th>price</th>
         </tr>
         <?... ?>

Прогружался по мере скролла страницы
  • Вопрос задан
  • 341 просмотр
Пригласить эксперта
Ответы на вопрос 3
@n1ksON
мидл
Пока это задача, а не вопрос.
В чём проблема? Подгружайте новые элементы таблицы, по мере скрола страницы. Отслеживайте прокрутку и, как будет подходить к концу страницы, вставляйте новые данные.
Ответ написан
Комментировать
no_one_safe
@no_one_safe
Как вариант, можно создать на странице JS объект из твоих данных (json_encode) и по мере скролла рисовать таблицу на лету с помощью JS.
Ответ написан
Комментировать
hrabry
@hrabry
При прокрутке когда нужны новые данные, отправлять запрос с последним id грубо говоря в списке таблицы, брать новую порцию отталкиваясь от этого id. если ответ в json на js рисовать часть таблицы либо если приходит ответ с partial(куском html) append'ить в конец таблицы. ну вообще для этого и придумана логика пагинации, обычно в фреймворках она есть из коробки, её же не обязательно применять для целых страниц с лайаутом.

Особо в библиотеке не разбирался, уверен можно сделать красивее: https://jsfiddle.net/h5pdrotq/
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы