Multiple pagination objects on one page

Hi all,

I’ve been having some problems with the pagination object in that I have three columns on a page, all of which require pagination and load more buttons. You can see here: http://content-free.net/index.php (click through the slightly crazy visuals…). Each of these columns retrives the content via versions of the following:

    <div class="column">
      <hr>
      <div class="innercolumn">
        <div class="innerscroll">
          <h1><?php echo page('news')->title()->html() ?></h1>
          <?php $numbernews = page('news')->perpage()->int() ?>

          <? $newsposts = page('news')->children()->visible()->flip()->paginate($numbernews) ?>

          <section id="newsfeed">
              <? foreach($newsposts as $newspost): ?>
                  <? snippet('newspost', compact('newspost')) ?>
              <? endforeach ?>
              <div id="news-load-area"></div>
          </section>
       
          <div id="newsbutton">
              <button id="loadnews"type="button" data-href="<? echo $newsposts->pagination()->nextPageURL() ?>" title="Load more blogposts">
                Load more <span><i class="fa fa-refresh" aria-hidden="true"></i></span>
              </button>
          </div>
        </div>
      </div>
    </div>

and each column loads further content into it via a loading button and this code:

$(document).on('click touchstart', '#loadnews', function() {

            var loadnews = $('#loadnews');
            var newshref = loadnews.data('href');
            console.log("newsbuttonclicked");

            $('#news-load-area').load(newshref + 'body #newsfeed .news', function() {
                $(this).children().unwrap();
                $('#newsfeed').append('<div id="news-load-area"></div>');
                console.log("newsfeedloaded");
            });

            $('#newsbutton').load(newshref + '#newsbutton #loadnews', function(){
                console.log("newsbuttonloaded");
              var newshrefnew = $('#loadnews').data('href');

              if (newshref === newshrefnew) {
                $("#loadnews").remove();
                console.log("newsbuttonremoved");
              };

            });
            
        });

So the .get drags in the new content .etc which works fine. However it only works fine when all the columns have content on each of the paginated pages. i.e. so on page:3 all columns would still have to have had enough content to necessitate that page:3 otherwise it will throw an error page.

Is there any way to seperate out the pagination objects for each one so they’re not tied to each other? (hopefully I’ve explained it well enough…)

Thanks!!
Max

I think we had this problem before and I think it was solved using different parameters for each pagination object.

Hi texnixe, thanks for the reply. What do you mean by using different parameters for the pagination object sorry? Apologies if it’s something very simple…

Best,
Max

See this topic: Pagination error with 5 items, works with 10

Great thanks! Worked like a charm