Načítání dalších článků pomocí ajax

na to nepotřebuješ složitou komponentu, na počítání ti stačí Nette\Utils\Paginator, pak jen vykreslíš button s odkazem na další stránku.

zapojíš snippety (tedy obalíš seznam článků + paginator do snippet makra), přidáš tlačítku ajax třídu, pří překreslení invaliduješ ty dva snippety

pokud chceš, aby se to nepřepisovalo, ale appendovalo, nastavíš data-ajax-append

David Matějka napsal(a):

na to nepotřebuješ složitou komponentu, na počítání ti stačí Nette\Utils\Paginator, pak jen vykreslíš button s odkazem na další stránku.

zapojíš snippety (tedy obalíš seznam článků + paginator do snippet makra), přidáš tlačítku ajax třídu, pří překreslení invaliduješ ty dva snippety

pokud chceš, aby se to nepřepisovalo, ale appendovalo, nastavíš data-ajax-append

Jasně to chápu ale mám něco takového

/* Načte a vykreslí článeky které jsou zařazeny do podpory.
 */
public function renderDefault($page = 1)
{
    $count = $this->clinicManager->getClinicsCount();

    // Vyrobíme si instanci Paginatoru a nastavíme jej
    $paginator = new \Nette\Utils\Paginator;
    $paginator->setItemCount($count); // celkový počet článků
    $paginator->setItemsPerPage(1); // počet položek na stránce
    $paginator->setPage($page); // číslo aktuální stránky

    $clinics = $this->clinicManager->getClinics($paginator->getLength(), $paginator->getOffset());
    $this->template->clinics = $clinics; // Předá článek do šablony.
    // a také samotný Paginator pro zobrazení možností stránkování
    $this->template->paginator = $paginator;
}

div class="entry entry-date-section notopmargin"><span>Co potřebujete vědět?</span></div>
            {snippet clinics}
                <div n:foreach="$clinics as $clinic" class="entry clearfix">
                    <div class="entry-timeline">
                        <div class="timeline-divider"></div>
                    </div>
                    <div class="entry-image">
                        {if $clinic->images_count}
                            <a n:href=":Front:Article: $clinic->url" data-lightbox="image"><img class="image_fade" src="{$basePath}/images/blog/{$clinic->article_id}/{$clinic->article_id}_0.png" alt="{$clinic->title}"></a>
                        {else}
                            <p>Náhled není k dispozici</p>
                        {/if}
                    </div>
                    <div class="entry-title">
                        <h2><a n:href=":Front:Article: $clinic->url">{$clinic->title}</a></h2>
                    </div>
                    <div class="entry-content">
                        <p>{$clinic->content|noescape|truncate:150}</p>
                        <a n:href=":Front:Article: $clinic->url" class="more-link">Číst více</a>
                    </div>
                </div>
            {/snippet}
        </div><!-- #posts end -->
        <div class="page-load-status">
            <div class="css3-spinner infinite-scroll-request">
                <div class="css3-spinner-ball-pulse-sync">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="alert alert-warning center infinite-scroll-last mx-auto" style="max-width: 20rem;">Konec obsahu</div>
            <div class="alert alert-warning center infinite-scroll-error mx-auto" style="max-width: 20rem;">Žádné další články nenalezeny</div>
        </div>
    <div class="center">
        {snippet paginator}
            <a n:href="default, $paginator->page+1" class="button button-3d button-dark button-large button-rounded load-next-posts ajax">Načíst další..</a>
        {/snippet}
    </div>

jQuery(window).on( 'load', function(){

           var $container = $('#posts');

           $container.isotope({
               itemSelector: '.entry',
               masonry: {
                   columnWidth: '.entry:not(.entry-date-section)'
               }
           });

           $container.infiniteScroll({
               path: '.load-next-posts',
               button: '.load-next-posts',
               scrollThreshold: false,
               history: false,
               status: '.page-load-status'
           });

           $container.on( 'load.infiniteScroll', function( event, response, path ) {
               var $items = $( response ).find('.entry');
               console.log($items);
               // append items after images loaded
               $items.imagesLoaded( function() {
                   $container.append( $items );
                   $container.isotope( 'insert', $items );
                   setTimeout( function(){
                       $container.isotope('layout');
                       SEMICOLON.initialize.resizeVideos();
                       SEMICOLON.widget.loadFlexSlider();
                       SEMICOLON.widget.masonryThumbs();
                   }, 1000 );
                   setTimeout( function(){
                       SEMICOLON.initialize.blogTimelineEntries();
                   }, 1500 );
               });
           });

           setTimeout( function(){
               SEMICOLON.initialize.blogTimelineEntries();
           }, 2500 );

           $(window).resize(function() {
               $container.isotope('layout');
               setTimeout( function(){
                   SEMICOLON.initialize.blogTimelineEntries();
               }, 2500 );
           });

       });

A kde si invaliduju ty snipety? Jelikož tam mám vždy číslo 2 :D i když mi to píše že mám 4 stránky :D

Editoval jAkErCZ (30. 1. 2019 15:22)