Pagination on page with 2 selectors

[mel47]

Hi,
Could someone could help me? I'm searching a way to output 2 different markups from 2 different selectors and use pagination. Basically, I want the first 3 news as featured and the next ones as a list. Pagination will be a "load more" button to replace the list by next results.

My first try was :

    $news = $pages->find("template=news, parent=1027, limit=3, sort=-publish_from");   //3 most recent news
        foreach($news as $post) {
            ///markup
            }
            
    $news2 = $pages->find("template=news, parent=1027, limit=10, sort=-publish_from, start=3");  //List of next 10
        foreach($news as $post) {
            ///markup
            }

It works fine, however pagination is messed up (it display only for $news, because of start parameter in $news2)

My second try. I was thinking use a kind of loop to display differently. however I'm little bit lost. I found this on web :

$i=0;
$news = $pages->find("template=news, parent=1027, limit=10 sort=-publish_from");  

foreach($news as $post) if ($i < 3) {
            ///markup
    $i++;
    }

However I'm not sure how to display the next 10, and I'm not sure for pagination.

Some other ways I'm not aware?

Thanks
Mélanie

[szabesz]

Hi, I can be mistaken, but you cannot do it without AJAX. When using simple requests with ProcessWire's standard pagination support, how would the server "know" in which state the other block being paginated is? If it's possible, I also want to learn how...

EDIT: if you "manually" pass along all the info required to manage both states in a single request, then you could implement such a feature on your own, but I'm not sure if it is supported by ProcessWire's pagination.

Edited May 10, 2017 by szabesz
typo and EDIT:

[Sergio]

Try removing the IDs of the 3 first items from the query, like on this example by @tpr:

 

[Sergio]

Try this (not tested):

$recent_items = 3;
$items_per_page = 10;

$most_recent_news = $pages->find("template=news, parent=1027, limit=' . $recent_items . ', sort=-publish_from");   //3 most recent news

foreach($most_recent_news as $post) {
    ///markup
}

$news = $pages->find("template=news, parent=1027, 'id!=' . $most_recent_news . ', limit=' . $items_per_page . ', sort=-publish_from");  //List of next 10

foreach($news as $post) {
    ///markup
}

echo $news->renderPager(); //render pagination

 

[szabesz]

Wow, does it work? Learning something new every day  

[tpr]

I can't believe I wrote that post almost 2 yrs ago and can't remember where I've used that snippet so I guess I'm getting old

[mel47]

Oh wow, it works! :-D Did I already said pw have the best community? ;-)
For posterity, it put the final version of my news template (without markup) based on @Sérgio with some modifications. I add start=0 on recent news, so they will not paginate. The list of 10 is then updated at each loading by the button. Maybe (probably) not best optimize, but it works!
@szabesz yes, ajax works fine. I use intercooler to facilitate my lacking knowledge.

 

if($config->ajax) {    //Ajax output
	$recent_items = 3;
	$limit = 10;
	$news = $pages->find("template=news, parent=1027, limit=$recent_items, sort=-publish_from, start=0");   //3 most recent news
	$news2 = $pages->find("template=news, parent=1027, limit=$limit, id!=$news, sort=-publish_from");  //Next 10

			foreach($news2 as $new) {
				//markup
			}

			$children = $page->children("limit=" . $limit);
			$totalpages = ceil($children->getTotal() / $limit);
			if ($input->pageNum) {
				if ($input->pageNum < $totalpages) {
				$content .="<li ic-append-from='" . $page->url . $config->pageNumUrlPrefix . ($input->pageNum + 1) . "' ic-trigger-on='scrolled-into-view' ic-target='.liste' ic-indicator='#indicator'>Next";
				}
			}
                  
// Main output
    $recent_items = 3;
	$limit = 10;
	$news = $pages->find("template=news, parent=1027, limit=$recent_items, sort=-publish_from, start=0");   //3 most recent news
		
	$content .=  "<div id='featured' class='liste'>;
	
		foreach($news as $post) {
				//Markup for featured news
			}
		
		$news2 = $pages->find("template=news, parent=1027, limit=$limit, id!=$news, sort=-publish_from");  //list of 10
		$content .= "<div id='listing'><ul class='style2'>";
		
		foreach($news2 as $post) {			
				//Markup for listed news
		}

$totalpages = ceil($news->getTotal() / $limit);
if ($input->pageNum) {
    if ($input->pageNum < $totalpages) {
 $content .= "<li><button class='btn btn-default' ic-get-from='" . $page->url . $config->pageNumUrlPrefix . ($input->pageNum + 1) . "' ic-target='closest li' ic-replace-target='true'>Load More... <i class='fa fa-spinner fa-spin ic-indicator' style='display:none'></i>
          </button></li>";
}                 
                  
                  

Thanks!

Mélanie