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)