Динамическая подгрузка списка
Зависимости
Компонент добавляет динамическую подгрузку списка при вертикальном скролинге, как во ВКонтакте.
Для тех браузеров в которых работа компонента не воможна (IE версии 8 и ниже), или в случае отключения javascript сохранится классическое поведение с постраничным баром.
Для того чтобы компонент заработал, нужно проделать следующие манипуляции с существующей страницей списка:
-
Инициализировать заголовок компонента:
<?php IncludeCom("dev/lazy_page_loader")?>
-
Переместить постраничный бар внутрь списка или таблицы. То есть для списка он должен находиться внутри тега ul. А для таблицы внутри тега tbody. При этом помните что внутри тега tbody можно размещать только тег tr.
-
Обрамить постраничный бар в любой любой тег и задать ему класс lazy-pages-bar. Получившийся элемент будет динамически заменен на анимацию подгрузки списка, а в процессе подгрузки и на новые элементы списка.
-
Внутри постраничного бара нужно назначить класс lazy-next-page для ссылки ведущей на следующую страницу.
-
Добавить внутри tbody или ul вначале и в конце вызовы функций LazyPageBegin() и LazyPageEnd() соответственно.
После этого у вас получится следующий шаблон:
Для таблицы:
<?php IncludeCom("dev/lazy_page_loader")?> <table> <thead> <tr> <th> ID </th> <th> Логин </th> </tr> </thead> <tbody> <?php LazyPageBegin();?> <?php foreach($users as $a):?> <tr> <td> <?= $a->user_id?> </td> <td> <?= $a->login?> </td> </tr> <?php endforeach;?> <tr class="lazy-pages-bar"> <td colspan="99"> <?php IncludeCom("dev/paginator", array( "pageUrl" => GetCurUrl('page=' . M_PAGINATOR_PAGE), "firstPageUrl" => GetCurUrl('page=' . M_DELETE_PARAM), "total" => $total, "perPage" => $per_page, "curPage" => $page, )) ?> </td> </tr> <?php LazyPageEnd();?> </tbody> </table>
Для списка:
<?php IncludeCom("dev/lazy_page_loader")?> <ul> <?php LazyPageBegin();?> <?php foreach($users as $a):?> <li> <?= $a->login?> </li> <?php endforeach;?> <div class="lazy-pages-bar"> <?php IncludeCom("dev/paginator", array( "pageUrl" => GetCurUrl('page=' . M_PAGINATOR_PAGE), "firstPageUrl" => GetCurUrl('page=' . M_DELETE_PARAM), "total" => $total, "perPage" => $per_page, "curPage" => $page, )) ?> </div> <?php LazyPageEnd();?> </ul>
Изменения в шаблоне постраничного бара:
<!-- ... --> <?php if(!empty($arrowRight)):?> <a href="<?= $arrowRight?>" title="Next page" class="lazy-next-page">»</a> <?php endif;?> <!-- ... -->